diff --git a/packages/twenty-front/src/hooks/useHotkeyScopeOnMount.ts b/packages/twenty-front/src/hooks/useHotkeyScopeOnMount.ts index 637b2017d..e1e4c298c 100644 --- a/packages/twenty-front/src/hooks/useHotkeyScopeOnMount.ts +++ b/packages/twenty-front/src/hooks/useHotkeyScopeOnMount.ts @@ -1,6 +1,10 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { useEffect } from 'react'; +/** + * @deprecated This hook uses useEffect + * Use event handlers and imperative code to manage hotkey scope changes. + */ export const useHotkeyScopeOnMount = (hotkeyScope: string) => { const { goBackToPreviousHotkeyScope, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx index 74ad15281..e97287d8d 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx @@ -24,7 +24,7 @@ export const DateFieldInput = ({ onClear, onSubmit, }: DateFieldInputProps) => { - const { fieldValue, setDraftValue } = useDateField(); + const { fieldValue, setDraftValue, hotkeyScope } = useDateField(); const persistField = usePersistField(); @@ -77,6 +77,7 @@ export const DateFieldInput = ({ onChange={handleChange} onClear={handleClear} onSubmit={handleSubmit} + hotkeyScope={hotkeyScope} /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx index 15f85c61c..ef21ca4f0 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx @@ -26,7 +26,7 @@ export const DateTimeFieldInput = ({ onClear, onSubmit, }: DateTimeFieldInputProps) => { - const { fieldValue, setDraftValue } = useDateTimeField(); + const { fieldValue, setDraftValue, hotkeyScope } = useDateTimeField(); const persistField = usePersistField(); @@ -80,6 +80,7 @@ export const DateTimeFieldInput = ({ isDateTimeInput onClear={handleClear} onSubmit={handleSubmit} + hotkeyScope={hotkeyScope} /> ); }; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx index f02cd70be..16a4b12e8 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx @@ -1,6 +1,7 @@ import { useRef, useState } from 'react'; import { Nullable } from 'twenty-ui'; +import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents'; import { InternalDatePicker, MONTH_AND_YEAR_DROPDOWN_ID, @@ -8,7 +9,6 @@ import { MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID, } from '@/ui/input/components/internal/date/components/InternalDatePicker'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; export type DateInputProps = { value: Nullable; @@ -24,6 +24,7 @@ export type DateInputProps = { onClear?: () => void; onSubmit?: (newDate: Nullable) => void; hideHeaderInput?: boolean; + hotkeyScope: string; }; export const DateInput = ({ @@ -37,6 +38,7 @@ export const DateInput = ({ onClear, onSubmit, hideHeaderInput, + hotkeyScope, }: DateInputProps) => { const [internalValue, setInternalValue] = useState(value); @@ -65,17 +67,39 @@ export const DateInput = ({ MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID, ); - useListenClickOutside({ - refs: [wrapperRef], - listenerId: 'DateInput', - callback: (event) => { - event.stopImmediatePropagation(); + const handleEnter = () => { + closeDropdownYearSelect(); + closeDropdownMonthSelect(); + closeDropdown(); - closeDropdownYearSelect(); - closeDropdownMonthSelect(); - closeDropdown(); - onClickOutside(event, internalValue); - }, + onEnter?.(internalValue); + }; + + const handleEscape = () => { + closeDropdownYearSelect(); + closeDropdownMonthSelect(); + closeDropdown(); + + onEscape?.(internalValue); + }; + + const handleClickOutside = (event: MouseEvent | TouchEvent) => { + event.stopImmediatePropagation(); + + closeDropdownYearSelect(); + closeDropdownMonthSelect(); + closeDropdown(); + + onClickOutside(event, internalValue); + }; + + useRegisterInputEvents({ + inputRef: wrapperRef, + inputValue: internalValue, + onEnter: handleEnter, + onEscape: handleEscape, + onClickOutside: handleClickOutside, + hotkeyScope: hotkeyScope, }); return ( diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx index eb0c21487..69876727b 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx @@ -1,7 +1,6 @@ import styled from '@emotion/styled'; import { DateTime } from 'luxon'; import ReactDatePicker from 'react-datepicker'; -import { Key } from 'ts-key-enum'; import { IconCalendarX, MenuItemLeftContent, @@ -305,11 +304,8 @@ export const InternalDatePicker = ({ date, onChange, onMouseSelect, - onEnter, - onEscape, clearable = true, isDateTimeInput, - keyboardEventsDisabled, onClear, isRelative, relativeDate, @@ -345,31 +341,6 @@ export const InternalDatePicker = ({ onMouseSelect?.(newDate); }; - const handleKeyDown = (event: React.KeyboardEvent) => { - if (isDefined(keyboardEventsDisabled) && keyboardEventsDisabled) { - return; - } - - switch (event.key) { - case Key.Enter: { - event.stopPropagation(); - event.preventDefault(); - - closeDropdowns(); - onEnter?.(internalDate); - break; - } - case Key.Escape: { - event.stopPropagation(); - event.preventDefault(); - - closeDropdowns(); - onEscape?.(internalDate); - break; - } - } - }; - const handleChangeMonth = (month: number) => { const newDate = new Date(internalDate); newDate.setMonth(month); @@ -469,7 +440,7 @@ export const InternalDatePicker = ({ const selectedDates = isRelative ? highlightedDates : [dateToUse]; return ( - +
- ); }; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownUnmountEffect.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownUnmountEffect.tsx deleted file mode 100644 index 83d67d833..000000000 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownUnmountEffect.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2'; -import { useEffect } from 'react'; - -export const DropdownUnmountEffect = ({ - dropdownId, -}: { - dropdownId: string; -}) => { - const { closeDropdown } = useDropdownV2(); - - useEffect(() => { - return () => { - closeDropdown(dropdownId); - }; - }, [closeDropdown, dropdownId]); - - return null; -};