From 224376233b2e55f6a207dc3ee15575a6cf5c55e0 Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Thu, 21 May 2026 11:22:21 +0200
Subject: [PATCH] fix(front): focus new Field widget and open side panel on add
 (#20777)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Context
In the record-page edit mode, the "Add widget" section has three menu
items:
`Fields group`, `Field`, and `More widgets`. `Fields group` creates the
widget, focuses it, and opens its settings side panel. `Field` only
added the widget to the draft — no focus, no panel — which left the user
without visible confirmation or a way to immediately edit the new
widget.

## Change
Updated `useCreateRecordPageFieldWidget` to mirror
`useCreateRecordPageFieldsWidget`:
After appending the new widget to the draft, it now sets
`pageLayoutEditingWidgetIdComponentState` to the new widget's id and
navigates the side panel to `SidePanelPages.RecordPageFieldSettings`
(with `focusTitleInput: true`, `resetNavigationStack: true`).
This matches the behavior of clicking an existing field widget in
`useOpenWidgetSettingsInSidePanel` (`WidgetType.FIELD` branch).
---
 .../hooks/useCreateRecordPageFieldWidget.ts   | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useCreateRecordPageFieldWidget.ts b/packages/twenty-front/src/modules/page-layout/hooks/useCreateRecordPageFieldWidget.ts
index 939e581d6b..b0af18db9a 100644
--- a/packages/twenty-front/src/modules/page-layout/hooks/useCreateRecordPageFieldWidget.ts
+++ b/packages/twenty-front/src/modules/page-layout/hooks/useCreateRecordPageFieldWidget.ts
@@ -3,14 +3,17 @@ import { isDefined } from 'twenty-shared/utils';
 import { usePageLayoutContentContext } from '@/page-layout/contexts/PageLayoutContentContext';
 import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageLayoutOrThrow';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
 import { createDefaultFieldWidget } from '@/page-layout/utils/createDefaultFieldWidget';
 import { useFieldWidgetEligibleFields } from '@/page-layout/widgets/field/hooks/useFieldWidgetEligibleFields';
 import { getFieldWidgetDefaultDisplayMode } from '@/page-layout/widgets/field/utils/getFieldWidgetDisplayModeConfig';
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
 import { useStore } from 'jotai';
 import { useCallback } from 'react';
+import { SidePanelPages } from 'twenty-shared/types';
 import { v4 as uuidv4 } from 'uuid';
 import { WidgetConfigurationType } from '~/generated-metadata/graphql';
 
@@ -33,6 +36,12 @@ export const useCreateRecordPageFieldWidget = () => {
     pageLayoutDraftComponentState,
   );
 
+  const pageLayoutEditingWidgetIdState = useAtomComponentStateCallbackState(
+    pageLayoutEditingWidgetIdComponentState,
+  );
+
+  const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
+
   const store = useStore();
 
   const createRecordPageFieldWidget = useCallback(() => {
@@ -82,11 +91,21 @@ export const useCreateRecordPageFieldWidget = () => {
       ...prev,
       tabs: addWidgetToTab(prev.tabs, tabId, newWidget),
     }));
+
+    store.set(pageLayoutEditingWidgetIdState, widgetId);
+
+    navigatePageLayoutSidePanel({
+      sidePanelPage: SidePanelPages.RecordPageFieldSettings,
+      focusTitleInput: true,
+      resetNavigationStack: true,
+    });
   }, [
     allFieldWidgetFields,
     currentPageLayout.tabs,
+    navigatePageLayoutSidePanel,
     objectMetadataItem.id,
     pageLayoutDraftState,
+    pageLayoutEditingWidgetIdState,
     store,
     tabId,
   ]);