fixes 6106 month/year datepicker-ui not working (#6199)

fixes #6106

---------

Co-authored-by: Marie <51697796+ijreilly@users.noreply.github.com>
Co-authored-by: Adithya Thejas S <adithyathejass.1997@gmail.com>
Co-authored-by: Rob Luke <code@robertluke.net>
Co-authored-by: rostaklein <r.klein@make.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx

@@ -3,9 +3,12 @@ import { v4 } from 'uuid';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker';
+import { useState } from 'react';
 import { isDefined } from '~/utils/isDefined';
 
 export const ObjectFilterDropdownDateInput = () => {
+  const [internalDate, setInternalDate] = useState<Date | null>(new Date());
+
   const {
     filterDefinitionUsedInDropdownState,
     selectedOperandInDropdownState,
@@ -24,8 +27,9 @@ export const ObjectFilterDropdownDateInput = () => {
   const selectedFilter = useRecoilValue(selectedFilterState);
 
   const handleChange = (date: Date | null) => {
-    if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return;
+    setInternalDate(date);
 
+    if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return;
     selectFilter?.({
       id: selectedFilter?.id ? selectedFilter.id : v4(),
       fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
@@ -40,7 +44,7 @@ export const ObjectFilterDropdownDateInput = () => {
 
   return (
     <InternalDatePicker
-      date={new Date()}
+      date={internalDate}
       onChange={handleChange}
       onMouseSelect={handleChange}
     />

packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx

@@ -1,6 +1,6 @@
-import ReactDatePicker from 'react-datepicker';
 import styled from '@emotion/styled';
 import { DateTime } from 'luxon';
+import ReactDatePicker from 'react-datepicker';
 import { Key } from 'ts-key-enum';
 import {
   IconCalendarX,
@@ -298,7 +298,7 @@ const StyledCustomDatePickerHeader = styled.div`
 `;
 
 export type InternalDatePickerProps = {
-  date: Date;
+  date: Date | null;
   onMouseSelect?: (date: Date | null) => void;
   onChange?: (date: Date | null) => void;
   clearable?: boolean;
@@ -372,30 +372,29 @@ export const InternalDatePicker = ({
   };
 
   const handleChangeMonth = (month: number) => {
-    const newDate = new Date(date);
+    const newDate = new Date(internalDate);
     newDate.setMonth(month);
     onChange?.(newDate);
   };
 
   const handleChangeYear = (year: number) => {
-    const newDate = new Date(date);
+    const newDate = new Date(internalDate);
     newDate.setFullYear(year);
     onChange?.(newDate);
   };
 
-  const dateWithoutTime = DateTime.fromJSDate(date)
+  const dateWithoutTime = DateTime.fromJSDate(internalDate)
     .toLocal()
     .set({
-      day: date.getUTCDate(),
+      day: internalDate.getUTCDate(),
-      month: date.getUTCMonth() + 1,
+      month: internalDate.getUTCMonth() + 1,
-      year: date.getUTCFullYear(),
+      year: internalDate.getUTCFullYear(),
       hour: 0,
       minute: 0,
       second: 0,
       millisecond: 0,
     })
     .toJSDate();
-
   const dateToUse = isDateTimeInput ? date : dateWithoutTime;
 
   return (
@@ -404,9 +403,11 @@ export const InternalDatePicker = ({
         <ReactDatePicker
           open={true}
           selected={dateToUse}
-          openToDate={dateToUse}
+          openToDate={isDefined(dateToUse) ? dateToUse : undefined}
           disabledKeyboardNavigation
           onChange={(newDate) => {
+            newDate?.setHours(internalDate.getUTCHours());
+            newDate?.setUTCMinutes(internalDate.getUTCMinutes());
             onChange?.(newDate);
           }}
           customInput={
@@ -440,13 +441,13 @@ export const InternalDatePicker = ({
                   options={months}
                   disableBlur
                   onChange={handleChangeMonth}
-                  value={date.getUTCMonth()}
+                  value={internalDate.getUTCMonth()}
                   fullWidth
                 />
                 <Select
                   dropdownId={MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID}
                   onChange={handleChangeYear}
-                  value={date.getUTCFullYear()}
+                  value={internalDate.getUTCFullYear()}
                   options={years}
                   disableBlur
                   fullWidth

packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx

@@ -1,7 +1,9 @@
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 import { ComponentDecorator } from 'twenty-ui';
 
+import { isDefined } from '~/utils/isDefined';
 import { InternalDatePicker } from '../InternalDatePicker';
 
 const meta: Meta<typeof InternalDatePicker> = {
@@ -11,6 +13,16 @@ const meta: Meta<typeof InternalDatePicker> = {
   argTypes: {
     date: { control: 'date' },
   },
+  render: ({ date }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [, updateArgs] = useArgs();
+    return (
+      <InternalDatePicker
+        date={isDefined(date) ? new Date(date) : new Date()}
+        onChange={(newDate) => updateArgs({ date: newDate })}
+      />
+    );
+  },
   args: { date: new Date('January 1, 2023 02:00:00') },
 };
 
@@ -42,5 +54,27 @@ export const WithOpenMonthSelect: Story = {
     ].forEach((monthLabel) =>
       expect(canvas.getByText(monthLabel)).toBeInTheDocument(),
     );
+
+    await userEvent.click(canvas.getByText('February'));
+
+    expect(canvas.getByText('February')).toBeInTheDocument();
+  },
+};
+
+export const WithOpenYearSelect: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+
+    const yearSelect = await canvas.findByText('2023');
+
+    await userEvent.click(yearSelect);
+
+    ['2024', '2025', '2026'].forEach((yearLabel) =>
+      expect(canvas.getByText(yearLabel)).toBeInTheDocument(),
+    );
+
+    await userEvent.click(canvas.getByText('2024'));
+
+    expect(canvas.getByText('2024')).toBeInTheDocument();
   },
 };