admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix date picker month/year dropdown (#11539)

Browse Source 
Fixes https://github.com/twentyhq/twenty/issues/11524
This commit is contained in:
Charles Bochet
2025-04-11 15:22:00 +02:00
committed by GitHub
parent 2a8defe262
commit 3018e3ac89
1 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
View File

@ -1,12 +1,15 @@
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents'; import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { import {
DateTimePicker, DateTimePicker,
MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID, MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID, MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
} from '@/ui/input/components/internal/date/components/InternalDatePicker'; } from '@/ui/input/components/internal/date/components/InternalDatePicker';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { useRecoilCallback } from 'recoil';
import { Nullable } from 'twenty-ui/utilities'; import { Nullable } from 'twenty-ui/utilities';
export type DateInputProps = { export type DateInputProps = {
@ -79,15 +82,28 @@ export const DateInput = ({
onEscape(internalValue); onEscape(internalValue);
}; };
const handleClickOutside = (event: MouseEvent | TouchEvent) => { const handleClickOutside = useRecoilCallback(
event.stopImmediatePropagation(); ({ snapshot }) =>
(event: MouseEvent | TouchEvent) => {
const hotkeyScope = snapshot
.getLoadable(currentHotkeyScopeState)
.getValue();
closeDropdownYearSelect(); if (hotkeyScope?.scope === TableHotkeyScope.CellEditMode) {
closeDropdownMonthSelect(); closeDropdownYearSelect();
closeDropdownMonthSelect();
onEscape(internalValue); onEscape(internalValue);
onClickOutside(event, internalValue); onClickOutside(event, internalValue);
}; }
},
[
closeDropdownYearSelect,
closeDropdownMonthSelect,
onEscape,
onClickOutside,
internalValue,
],
);
useRegisterInputEvents({ useRegisterInputEvents({
inputRef: wrapperRef, inputRef: wrapperRef,