🐛(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
openfun · Feb 12, 2024 · e79768c · e79768c
1 parent 009714a
commit e79768c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/.changeset/rude-monkeys-behave.md 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
@@ -233,13 +233,15 @@ const CalendarAux = forwardRef(
                 }}
                 disabled={isPrevButtonDisabled}
                 onClick={() => state.focusPreviousSection()}
+                type="button"
               />
               <Button
                 className="c__calendar__wrapper__header__actions__dropdown"
                 color="tertiary-text"
                 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,13 +277,15 @@ 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"
                 color="tertiary-text"
                 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
@@ -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
@@ -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 && (