Fix command menu input click outside listener blocking other elements (#16934)

click outside listeners for `CommandMenuItemNumberInput` and
`CommandMenuItemTextInput` were always active, even when the input
wasn't focused. This blocked clicks on other elements like toggles in
chart settings.

fixed by only enabling click outside listener when input is actually
focused

packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx

@@ -3,9 +3,11 @@ import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-typ
 import { TextInput } from '@/ui/input/components/TextInput';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
+import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import styled from '@emotion/styled';
 import { useRef, useState } from 'react';
+import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { type IconComponent } from 'twenty-ui/display';
 import {
@@ -43,6 +45,9 @@ export const CommandMenuItemNumberInput = ({
   const [draftValue, setDraftValue] = useState(value);
   const [hasError, setHasError] = useState(false);
 
+  const currentFocusId = useRecoilValue(currentFocusIdSelector);
+  const isNumberInputCurrentlyFocused = currentFocusId === focusId;
+
   const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
   const { removeFocusItemFromFocusStackById } =
     useRemoveFocusItemFromFocusStackById();
@@ -105,7 +110,9 @@ export const CommandMenuItemNumberInput = ({
     inputValue: draftValue,
     onEscape: handleEscape,
     onEnter: handleEnter,
-    onClickOutside: handleClickOutside,
+    onClickOutside: isNumberInputCurrentlyFocused
+      ? handleClickOutside
+      : undefined,
   });
 
   const handleChange = (text: string) => {

packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx

@@ -3,9 +3,11 @@ import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-typ
 import { TextInput } from '@/ui/input/components/TextInput';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
+import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import styled from '@emotion/styled';
 import { useRef, useState } from 'react';
+import { useRecoilValue } from 'recoil';
 import { type IconComponent } from 'twenty-ui/display';
 
 type CommandMenuItemTextInputProps = {
@@ -35,6 +37,9 @@ export const CommandMenuItemTextInput = ({
   const focusId = `${id}-input`;
   const [draftValue, setDraftValue] = useState(value);
 
+  const currentFocusId = useRecoilValue(currentFocusIdSelector);
+  const isTextInputCurrentlyFocused = currentFocusId === focusId;
+
   const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
   const { removeFocusItemFromFocusStackById } =
     useRemoveFocusItemFromFocusStackById();
@@ -77,7 +82,9 @@ export const CommandMenuItemTextInput = ({
     inputValue: draftValue,
     onEscape: handleEscape,
     onEnter: handleEnter,
-    onClickOutside: handleClickOutside,
+    onClickOutside: isTextInputCurrentlyFocused
+      ? handleClickOutside
+      : undefined,
   });
 
   const focusInput = () => {