fix(DatePicker): set type of buttons in CalendarHeader to button inst…

…ead of default submit
GovTechSG · Oct 2, 2024 · 54261cc · 54261cc
1 parent 3f2e6d5
commit 54261cc
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 0 deletions.
diff --git a/src/DatePicker/CalendarHeader.tsx b/src/DatePicker/CalendarHeader.tsx
@@ -148,6 +148,7 @@ const CalendarHeader = React.forwardRef<HTMLDivElement, CalendarHeaderProps>(
       }
       const previousButton = (
         <button
+          type="button"
           onClick={handleClickPrevious}
           onKeyDown={handlePressPrevious}
           aria-label={ariaLabels[view]}
@@ -194,6 +195,7 @@ const CalendarHeader = React.forwardRef<HTMLDivElement, CalendarHeaderProps>(
       }
       return (
         <button
+        type="button"
         onClick={handleClickNext}
         onKeyDown={handlePressNext}
         aria-label={ariaLabels[view]}
@@ -221,6 +223,7 @@ const CalendarHeader = React.forwardRef<HTMLDivElement, CalendarHeaderProps>(
 
       return (
         <button
+        type="button"
         onClick={changeView}
         onKeyDown={handlePressChangeView}
         aria-disabled={view === 'year'}

diff --git a/src/DatePicker/MonthView.tsx b/src/DatePicker/MonthView.tsx
@@ -237,6 +237,7 @@ export const MonthView = React.forwardRef<HTMLDivElement, MonthViewProps>(
           const currentMonthAriaLabel = `Current month, ${defaultAriaLabel}`;
           return (
             <button
+              type="button"
               aria-label={
                 isCurrentMonthAndYear ? currentMonthAriaLabel : defaultAriaLabel
               }

diff --git a/src/DatePicker/YearView.tsx b/src/DatePicker/YearView.tsx
@@ -197,6 +197,7 @@ export const YearView = React.forwardRef<HTMLDivElement, YearViewProps>(
           const isCurrentYear =  CURRENT_YEAR === year
           return (
             <button
+              type="button"
               aria-selected={activeYearClass ? 'true' : 'false'}
               aria-label={isCurrentYear ? `Current year, ${year}` : undefined}
               className={classNames(

diff --git a/tests/DatePicker/__snapshots__/CalendarHeader.test.tsx.snap b/tests/DatePicker/__snapshots__/CalendarHeader.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`CalendarHeader should have default html structure 1`] = `
   >
     <button
       aria-label="Show previous month"
+      type="button"
     >
       <i
         class="bi bi-chevron-left"
@@ -16,11 +17,13 @@ exports[`CalendarHeader should have default html structure 1`] = `
       aria-disabled="false"
       aria-label=""
       aria-live="polite"
+      type="button"
     >
       March 2022
     </button>
     <button
       aria-label="Show next month"
+      type="button"
     >
       <i
         class="bi bi-chevron-right"