From 4b34add51c5407a4142816ee23873cedc9a6061b Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Mon, 5 Jan 2026 16:40:54 +0530
Subject: [PATCH] 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
---
 .../components/CommandMenuItemNumberInput.tsx            | 9 ++++++++-
 .../command-menu/components/CommandMenuItemTextInput.tsx | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx
index b68ee73497..1bca45a49d 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx
+++ b/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) => {
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx
index c333eca5fd..0c4fd7e5c0 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx
+++ b/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 = () => {