From 76ad5621c6ac5f171e28002f25639383f6497a37 Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Wed, 14 Jun 2023 14:02:40 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20fix=20calendar=20selects?=
 =?UTF-8?q?=20initialization=20and=20syncing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Select under the calendar component were not properly initialized,
leading to issues. Additionally, syncing the dropdowns with the calendar
state was causing unnecessary renders. Selects now update on user events
triggered by the toggle button, ensuring the selected item remains
up-to-date. The code has been refactored to eliminate duplication
and improve the component's readability and maintainability.
---
 .changeset/strange-jeans-confess.md           |  5 +
 .../components/Forms/DatePicker/Calendar.tsx  | 97 ++++++++-----------
 2 files changed, 45 insertions(+), 57 deletions(-)
 create mode 100644 .changeset/strange-jeans-confess.md

diff --git a/.changeset/strange-jeans-confess.md b/.changeset/strange-jeans-confess.md
new file mode 100644
index 0000000..95e7a94
--- /dev/null
+++ b/.changeset/strange-jeans-confess.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+Fix initial focused item on select opening under the calendar
diff --git a/packages/react/src/components/Forms/DatePicker/Calendar.tsx b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
index 4372ce3..66d2cb9 100644
--- a/packages/react/src/components/Forms/DatePicker/Calendar.tsx
+++ b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useMemo, useRef } from "react";
 import {
   CalendarDate,
   createCalendar,
@@ -127,17 +127,6 @@ export const Calendar = ({
     });
   }, [state.maxValue, state.minValue, state.focusedDate.year]);
 
-  const downshiftMonth = useSelect({
-    items: monthItems,
-    itemToString: optionToString,
-    onSelectedItemChange: (e: UseSelectStateChange<Option>) => {
-      const updatedFocusedDate = state.focusedDate.set({
-        month: e?.selectedItem?.value,
-      });
-      state.setFocusedDate(updatedFocusedDate);
-    },
-  });
-
   const yearItems: Array<Option> = useMemo(() => {
     const calendarCurrentUser = createCalendar(
       new Intl.DateTimeFormat().resolvedOptions().calendar
@@ -162,44 +151,24 @@ export const Calendar = ({
     });
   }, [state.focusedDate, state.timeZone, state.maxValue, state.minValue]);
 
-  const downshiftYear = useSelect({
-    items: yearItems,
-    itemToString: optionToString,
-    onSelectedItemChange: (e: UseSelectStateChange<Option>) => {
-      const updatedFocusedDate = state.focusedDate.set({
-        year: e?.selectedItem?.value,
-      });
-      state.setFocusedDate(updatedFocusedDate);
-    },
-    initialSelectedItem: yearItems.find(
-      (item) => item.value === state.focusedDate.year
-    ),
-  });
-
-  useEffect(() => {
-    if (downshiftMonth.selectedItem?.value === state.focusedDate.month) {
-      return;
-    }
-    const focusedMonth = monthItems.find(
-      (item) => item.value === state.focusedDate.month
-    );
-    if (focusedMonth) {
-      downshiftMonth.selectItem(focusedMonth);
-    }
-  }, [state.focusedDate.month]);
-
-  useEffect(() => {
-    if (downshiftYear.selectedItem?.value === state.focusedDate.year) {
-      return;
-    }
-    const focusedYear = yearItems.find(
-      (item) => item.value === state.focusedDate.year
-    );
-    if (focusedYear) {
-      downshiftYear.selectItem(focusedYear);
-    }
-  }, [state.focusedDate.year]);
   const { t } = useCunningham();
+  const useDownshiftSelect = (
+    key: string,
+    items: Array<Option>
+  ): UseSelectReturnValue<Option> => {
+    return useSelect({
+      items,
+      itemToString: optionToString,
+      onSelectedItemChange: (e: UseSelectStateChange<Option>) => {
+        const updatedFocusedDate = state.focusedDate.set({
+          [key]: e?.selectedItem?.value,
+        });
+        state.setFocusedDate(updatedFocusedDate);
+      },
+    });
+  };
+  const downshiftMonth = useDownshiftSelect("month", monthItems);
+  const downshiftYear = useDownshiftSelect("year", yearItems);
 
   // isDisabled and onPress props don't exist on the <Button /> component.
   // remove them to avoid any warning.
@@ -214,6 +183,26 @@ export const Calendar = ({
     ...nextButtonOtherProps
   } = nextButtonProps;
 
+  const getToggleButtonProps = (
+    key: string,
+    items: Array<Option>,
+    downshift: UseSelectReturnValue<Option>
+  ) => ({
+    ...downshift.getToggleButtonProps(),
+    onClick: () => {
+      const selectedItem = items.find(
+        (item) => item.value === state.focusedDate[key as keyof CalendarDate]
+      );
+      if (selectedItem) {
+        downshift.selectItem(selectedItem);
+      }
+      downshift.toggleMenu();
+    },
+    "aria-label": t(
+      `components.forms.date_picker.${key}_select_button_aria_label`
+    ),
+  });
+
   return (
     <div className="c__calendar">
       <div
@@ -245,10 +234,7 @@ export const Calendar = ({
               size="small"
               iconPosition="right"
               icon={<span className="material-icons">arrow_drop_down</span>}
-              {...downshiftMonth.getToggleButtonProps()}
-              aria-label={t(
-                "components.forms.date_picker.month_select_button_aria_label"
-              )}
+              {...getToggleButtonProps("month", monthItems, downshiftMonth)}
             >
               {selectedMonthItemFormatter.format(
                 state.focusedDate.toDate(state.timeZone)
@@ -288,10 +274,7 @@ export const Calendar = ({
               size="small"
               iconPosition="right"
               icon={<span className="material-icons">arrow_drop_down</span>}
-              {...downshiftYear.getToggleButtonProps()}
-              aria-label={t(
-                "components.forms.date_picker.year_select_button_aria_label"
-              )}
+              {...getToggleButtonProps("year", yearItems, downshiftYear)}
             >
               {yearItemsFormatter.format(
                 state.focusedDate.toDate(state.timeZone)