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 43923fc130..f05307db2b 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx @@ -4,9 +4,9 @@ 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 { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType'; import styled from '@emotion/styled'; +import { useStore } from 'jotai'; import { useRef, useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { type IconComponent } from 'twenty-ui/display'; @@ -44,9 +44,7 @@ export const CommandMenuItemNumberInput = ({ const focusId = `${id}-input`; const [draftValue, setDraftValue] = useState(value); const [hasError, setHasError] = useState(false); - - const currentFocusId = useAtomStateValue(currentFocusIdSelector); - const isNumberInputCurrentlyFocused = currentFocusId === focusId; + const store = useStore(); const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack(); const { removeFocusItemFromFocusStackById } = @@ -87,20 +85,24 @@ export const CommandMenuItemNumberInput = ({ }; const handleBlur = () => { + const isInputStillFocused = + store.get(currentFocusIdSelector.atom) === focusId; + + if (isInputStillFocused && draftValue !== value) { + handleCommit(draftValue); + } + removeFocusItemFromFocusStackById({ focusId }); }; const handleEscape = () => { + removeFocusItemFromFocusStackById({ focusId }); setDraftValue(value); + setHasError(false); inputRef.current?.blur(); }; - const handleClickOutside = () => { - handleCommit(draftValue); - }; - const handleEnter = () => { - handleCommit(draftValue); inputRef.current?.blur(); }; @@ -110,9 +112,6 @@ export const CommandMenuItemNumberInput = ({ inputValue: draftValue, onEscape: handleEscape, onEnter: handleEnter, - 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 3b7df12906..53e2e0cb02 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx @@ -4,9 +4,9 @@ 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 { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType'; import styled from '@emotion/styled'; +import { useStore } from 'jotai'; import { useRef, useState } from 'react'; import { type IconComponent } from 'twenty-ui/display'; @@ -36,9 +36,7 @@ export const CommandMenuItemTextInput = ({ const inputRef = useRef(null); const focusId = `${id}-input`; const [draftValue, setDraftValue] = useState(value); - - const currentFocusId = useAtomStateValue(currentFocusIdSelector); - const isTextInputCurrentlyFocused = currentFocusId === focusId; + const store = useStore(); const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack(); const { removeFocusItemFromFocusStackById } = @@ -59,32 +57,32 @@ export const CommandMenuItemTextInput = ({ }; const handleBlur = () => { + const isInputStillFocused = + store.get(currentFocusIdSelector.atom) === focusId; + + if (isInputStillFocused && draftValue !== value) { + onChange(draftValue); + } + removeFocusItemFromFocusStackById({ focusId }); }; const handleEscape = () => { + removeFocusItemFromFocusStackById({ focusId }); setDraftValue(value); inputRef.current?.blur(); }; const handleEnter = () => { - onChange(draftValue); inputRef.current?.blur(); }; - const handleClickOutside = () => { - onChange(draftValue); - }; - useRegisterInputEvents({ focusId, inputRef: inputRef, inputValue: draftValue, onEscape: handleEscape, onEnter: handleEnter, - onClickOutside: isTextInputCurrentlyFocused - ? handleClickOutside - : undefined, }); const focusInput = () => {