mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix bug date picker month and year dropdown not clickable (#12963)

Browse Source 
This PR fixes a bug that only happens on workflow form inputs.

Clicking a month or year dropdown in the date picker header, will close
the whole date picker, instead of changing the year or month.

This is because the date picker considers that there is a click outside
happening.

So to fix that we use the excluded click outside id system.

Fixes https://github.com/twentyhq/twenty/issues/12922

See related issue to discuss the improvement of this system :
https://github.com/twentyhq/core-team-issues/issues/1166
This commit is contained in:
Lucas Bordeau
2025-07-02 15:19:21 +02:00
committed by GitHub
parent 7f323aaa16
commit 54e233d7b9
2 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
View File

@ -153,6 +153,10 @@ export const FormDateTimeFieldInput = ({
handlePickerClickOutside(); handlePickerClickOutside();
}, },
enabled: displayDatePicker, enabled: displayDatePicker,
excludedClickOutsideIds: [
MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
],
}); });
const handlePickerChange = (newDate: Nullable<Date>) => { const handlePickerChange = (newDate: Nullable<Date>) => {

41
packages/twenty-front/src/modules/ui/input/components/internal/date/components/AbsoluteDatePickerHeader.tsx
View File

@ -5,6 +5,7 @@ import { Select } from '@/ui/input/components/Select';
import { DateTimeInput } from '@/ui/input/components/internal/date/components/DateTimeInput'; import { DateTimeInput } from '@/ui/input/components/internal/date/components/DateTimeInput';
import { getMonthSelectOptions } from '@/ui/input/components/internal/date/utils/getMonthSelectOptions'; import { getMonthSelectOptions } from '@/ui/input/components/internal/date/utils/getMonthSelectOptions';
import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
import { IconChevronLeft, IconChevronRight } from 'twenty-ui/display'; import { IconChevronLeft, IconChevronRight } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input'; import { LightIconButton } from 'twenty-ui/input';
import { import {
@ -76,20 +77,32 @@ export const AbsoluteDatePickerHeader = ({
)} )}
<StyledCustomDatePickerHeader> <StyledCustomDatePickerHeader>
<Select <ClickOutsideListenerContext.Provider
dropdownId={MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID} value={{
options={getMonthSelectOptions()} excludedClickOutsideId: MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
onChange={onChangeMonth} }}
value={endOfDayInLocalTimezone.getMonth()} >
fullWidth <Select
/> dropdownId={MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID}
<Select options={getMonthSelectOptions()}
dropdownId={MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID} onChange={onChangeMonth}
onChange={onChangeYear} value={endOfDayInLocalTimezone.getMonth()}
value={endOfDayInLocalTimezone.getFullYear()} fullWidth
options={years} />
fullWidth </ClickOutsideListenerContext.Provider>
/> <ClickOutsideListenerContext.Provider
value={{
excludedClickOutsideId: MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
}}
>
<Select
dropdownId={MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID}
onChange={onChangeYear}
value={endOfDayInLocalTimezone.getFullYear()}
options={years}
fullWidth
/>
</ClickOutsideListenerContext.Provider>
<LightIconButton <LightIconButton
Icon={IconChevronLeft} Icon={IconChevronLeft}
onClick={onSubtractMonth} onClick={onSubtractMonth}