🐛(react) fix DatePicker submit button

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

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix DatePicker submit button

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>

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.

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
-                  {...{
+                  type="button"
-                    ...otherButtonProps,
+                  onKeyDown={(e) => {
-                    "aria-label": t(
+                    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 && (