From e79768c7ced1421e49e9effca54b47ff388229f1 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 2 Feb 2024 15:06:35 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20fix=20DatePicker=20submit?=
 =?UTF-8?q?=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As the default type of button is "submit", when including a DatePicker
inside a form, clicking on any of its button was triggering form
submission.

Fixes #245
---
 .changeset/rude-monkeys-behave.md             |  5 ++++
 .../components/Forms/DatePicker/Calendar.tsx  |  6 ++++
 .../Forms/DatePicker/CalendarCell.tsx         |  1 +
 .../Forms/DatePicker/DatePickerAux.tsx        | 30 +++++++++++--------
 4 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/rude-monkeys-behave.md

diff --git a/.changeset/rude-monkeys-behave.md b/.changeset/rude-monkeys-behave.md
new file mode 100644
index 000000000..38d3286d1
--- /dev/null
+++ b/.changeset/rude-monkeys-behave.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix DatePicker submit button
diff --git a/packages/react/src/components/Forms/DatePicker/Calendar.tsx b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
index b725f4292..4157aea7b 100644
--- a/packages/react/src/components/Forms/DatePicker/Calendar.tsx
+++ b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
@@ -233,6 +233,7 @@ const CalendarAux = forwardRef(
                 }}
                 disabled={isPrevButtonDisabled}
                 onClick={() => state.focusPreviousSection()}
+                type="button"
               />
               <Button
                 className="c__calendar__wrapper__header__actions__dropdown"
@@ -240,6 +241,7 @@ const CalendarAux = forwardRef(
                 size="small"
                 iconPosition="right"
                 icon={<span className="material-icons">arrow_drop_down</span>}
+                type="button"
                 {...getToggleButtonProps("month", monthItems, downshiftMonth)}
               >
                 {selectedMonthItemFormatter.format(
@@ -250,6 +252,7 @@ const CalendarAux = forwardRef(
                 color="tertiary-text"
                 size="small"
                 icon={<span className="material-icons">navigate_next</span>}
+                type="button"
                 {...{
                   ...nextButtonOtherProps,
                   "aria-label": t(
@@ -274,6 +277,7 @@ const CalendarAux = forwardRef(
                 aria-label={t(
                   "components.forms.date_picker.previous_year_button_aria_label",
                 )}
+                type="button"
               />
               <Button
                 className="c__calendar__wrapper__header__actions__dropdown"
@@ -281,6 +285,7 @@ const CalendarAux = forwardRef(
                 size="small"
                 iconPosition="right"
                 icon={<span className="material-icons">arrow_drop_down</span>}
+                type="button"
                 {...getToggleButtonProps("year", yearItems, downshiftYear)}
               >
                 {yearItemsFormatter.format(
@@ -299,6 +304,7 @@ const CalendarAux = forwardRef(
                 aria-label={t(
                   "components.forms.date_picker.next_year_button_aria_label",
                 )}
+                type="button"
               />
             </div>
           </div>
diff --git a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
index 66e6d366f..23f867f81 100644
--- a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
+++ b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
@@ -78,6 +78,7 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
               ),
             },
           )}
+          type="button"
           disabled={isDisabled}
           {...buttonProps}
           // The keyboard's ENTER event triggers the button twice.
diff --git a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
index 4cd6f40e2..9ef2319ee 100644
--- a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
@@ -80,11 +80,6 @@ const DatePickerAux = forwardRef(
       [pickerState.validationState, props.state],
     );
 
-    // onPress props don't exist on the <Button /> component.
-    // Remove it to avoid any warning.
-    const { onPress: onPressToggleButton, ...otherButtonProps } =
-      pickerProps.buttonProps;
-
     return (
       <I18nProvider locale={locale || currentLocale}>
         <Field {...props}>
@@ -141,18 +136,21 @@ const DatePickerAux = forwardRef(
               )}
               <div className="c__date-picker__wrapper__icon">
                 <Button
-                  {...{
-                    ...otherButtonProps,
-                    "aria-label": t(
-                      pickerState.isOpen
-                        ? "components.forms.date_picker.toggle_button_aria_label_close"
-                        : "components.forms.date_picker.toggle_button_aria_label_open",
-                    ),
+                  type="button"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      pickerState.toggle();
+                    }
                   }}
+                  onClick={pickerState.toggle}
+                  aria-label={t(
+                    pickerState.isOpen
+                      ? "components.forms.date_picker.toggle_button_aria_label_close"
+                      : "components.forms.date_picker.toggle_button_aria_label_open",
+                  )}
                   color="tertiary-text"
                   size="small"
                   className="c__date-picker__wrapper__toggle"
-                  onClick={pickerState.toggle}
                   icon={
                     <span className="material-icons icon">calendar_today</span>
                   }
@@ -170,10 +168,16 @@ const DatePickerAux = forwardRef(
                 size="nano"
                 icon={<span className="material-icons">close</span>}
                 onClick={onClear}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    onClear();
+                  }
+                }}
                 aria-label={t(
                   "components.forms.date_picker.clear_button_aria_label",
                 )}
                 disabled={disabled}
+                type="button"
               />
             </div>
             {pickerState.isOpen && (