[Date picker] Selecting a month or a year must only update the view and not update the selected date

[Devessier]

Scope & Context

Discussed that on Discord: https://discord.com/channels/1130383047699738754/1315729769861480529/1316459293691740180.

Current behavior

Selecting a month or a year in the picker changes the selected date.

CleanShot_2024-12-10_at_18.29.23.mov

Expected behavior

I would expect only the picker view to be updated to show the days of the active month. The date should only be updated when the user clicks on a day of the picker.

Technical inputs

See packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx

[muraliSingh7]

@Devessier
The onClick in twenty-ui/src/navigation/menu-item. It is not triggering at all. I have added as many console.log as possible but it is not triggering.

[muraliSingh7]

@Devessier
The component DateInput.tsx currently uses the following logic to handle clicks outside the component:

useListenClickOutside({
    refs: [wrapperRef],
    listenerId: 'DateInput',
    callback: (event) => {
      event.stopImmediatePropagation();

      closeDropdownYearSelect();
      closeDropdownMonthSelect();
      closeDropdown();
      onClickOutside(event, internalValue);
    },
});

Issue

The current implementation of the useListenClickOutside hook assumes that a click inside the dropdown (year or month selector) should be treated as a click outside the DateInput component. This prevents the onClick event of the MenuItem.tsx component from being triggered properly.

Temporary Fix

To resolve this issue you can comment out the following lines in the DateInput.tsx component:

event.stopImmediatePropagation();

closeDropdownYearSelect();
closeDropdownMonthSelect();
closeDropdown();

Result of the Fix

With these lines commented out, the dropdown will not close immediately upon selecting a year or month. However, the onClick inside the dropdowns will trigger as expected. The dropdowns will remain open until the user clicks outside the entire DateInput component.

It would be helpful if @Bonapara or any internal members could review this and provide feedback on suggestions as well as observations.

[Devessier]

Thank you, @muraliSingh7, for your help with debugging. It will be helpful when I work on this bug.

[muraliSingh7]

@Devessier I can work on this issue, but I need some guidance. Currently, when the user selects a date or clicks outside, the date input closes as expected. However, when editing the month or year from the dropdown, should the date input close immediately after the selection, or should it wait for a click outside the input? Please let me know your preferred behavior.