Fixes for production (#13164)

This PR fixes two bugs : 
- Some important push item to focus stack calls were setting global
hotkey conflicting keys to true (like open dropdown)
- Icon picker matrix items were broken

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHotKeys.ts

@@ -117,5 +117,8 @@ export const useCommandMenuHotKeys = () => {
       goBackFromCommandMenu,
       setGlobalCommandMenuContext,
     ],
+    options: {
+      preventDefault: false,
+    },
   });
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx

@@ -5,7 +5,10 @@ import { useRecordTableContextOrThrow } from '@/object-record/record-table/conte
 import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus';
 import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId';
 import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
+import { currentFocusedItemSelector } from '@/ui/utilities/focus/states/currentFocusedItemSelector';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useRecoilValue } from 'recoil';
 type RecordTableBodyFocusClickOutsideEffectProps = {
   tableBodyRef: React.RefObject<HTMLDivElement>;
 };
@@ -17,6 +20,10 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
 
   const leaveTableFocus = useLeaveTableFocus(recordTableId);
 
+  const currentFocusedItem = useRecoilValue(currentFocusedItemSelector);
+
+  const componentType = currentFocusedItem?.componentInstance.componentType;
+
   useListenClickOutside({
     excludedClickOutsideIds: [
       ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
@@ -27,6 +34,15 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
     listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
     refs: [tableBodyRef],
     callback: () => {
+      if (
+        componentType !== FocusComponentType.PAGE &&
+        componentType !== FocusComponentType.RECORD_TABLE &&
+        componentType !== FocusComponentType.RECORD_TABLE_ROW &&
+        componentType !== FocusComponentType.RECORD_TABLE_CELL
+      ) {
+        return;
+      }
+
       leaveTableFocus();
     },
   });

packages/twenty-front/src/modules/object-record/record-title-cell/hooks/useRecordTitleCell.tsx

@@ -79,6 +79,10 @@ export const useRecordTitleCell = () => {
               prefix: containerType,
             }),
           },
+          globalHotkeysConfig: {
+            enableGlobalHotkeysConflictingWithKeyboard: false,
+            enableGlobalHotkeysWithModifiers: false,
+          },
         });
 
         const recordTitleCellId = getRecordFieldInputInstanceId({

packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx

@@ -60,6 +60,15 @@ const StyledLightIconButton = styled(LightIconButton)<{
         : 'transparent'};
 `;
 
+const StyledMatrixItem = styled.div`
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+`;
+
 const convertIconKeyToLabel = (iconKey: string) =>
   iconKey.replace(/[A-Z]/g, (letter) => ` ${letter}`).trim();
 
@@ -84,18 +93,20 @@ const IconPickerIcon = ({
   );
 
   return (
-    <SelectableListItem itemId={iconKey} onEnter={onClick}>
-      <StyledLightIconButton
-        key={iconKey}
-        aria-label={convertIconKeyToLabel(iconKey)}
-        size="medium"
-        title={iconKey}
-        isSelected={iconKey === selectedIconKey || !!isSelectedItemId}
-        isFocused={iconKey === focusedIconKey}
-        Icon={Icon}
-        onClick={onClick}
-      />
-    </SelectableListItem>
+    <StyledMatrixItem>
+      <SelectableListItem itemId={iconKey} onEnter={onClick}>
+        <StyledLightIconButton
+          key={iconKey}
+          aria-label={convertIconKeyToLabel(iconKey)}
+          size="medium"
+          title={iconKey}
+          isSelected={iconKey === selectedIconKey || !!isSelectedItemId}
+          isFocused={iconKey === focusedIconKey}
+          Icon={Icon}
+          onClick={onClick}
+        />
+      </SelectableListItem>
+    </StyledMatrixItem>
   );
 };
 

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useOpenDropdown.ts

@@ -50,7 +50,14 @@ export const useOpenDropdown = () => {
             type: FocusComponentType.DROPDOWN,
             instanceId: dropdownComponentInstanceId,
           },
-          globalHotkeysConfig: args?.globalHotkeysConfig ?? undefined,
+          globalHotkeysConfig: {
+            enableGlobalHotkeysConflictingWithKeyboard:
+              args?.globalHotkeysConfig
+                ?.enableGlobalHotkeysConflictingWithKeyboard ?? false,
+            enableGlobalHotkeysWithModifiers:
+              args?.globalHotkeysConfig?.enableGlobalHotkeysWithModifiers ??
+              false,
+          },
         });
       },
     [

packages/twenty-front/src/modules/ui/utilities/focus/states/currentFocusedItemSelector.ts

@@ -0,0 +1,12 @@
+import { FocusStackItem } from '@/ui/utilities/focus/types/FocusStackItem';
+import { selector } from 'recoil';
+import { focusStackState } from './focusStackState';
+
+export const currentFocusedItemSelector = selector<FocusStackItem | undefined>({
+  key: 'currentFocusedItemSelector',
+  get: ({ get }) => {
+    const focusStack = get(focusStackState);
+
+    return focusStack.at(-1);
+  },
+});