From 54261cc7ba5c3cae20c9c85f1552e06f52c9e259 Mon Sep 17 00:00:00 2001
From: Leon S <6985556+sxwei123@users.noreply.github.com>
Date: Wed, 2 Oct 2024 11:55:43 +0800
Subject: [PATCH] fix(DatePicker): set type of buttons in CalendarHeader to
 button instead of default submit

---
 src/DatePicker/CalendarHeader.tsx                           | 3 +++
 src/DatePicker/MonthView.tsx                                | 1 +
 src/DatePicker/YearView.tsx                                 | 1 +
 tests/DatePicker/__snapshots__/CalendarHeader.test.tsx.snap | 3 +++
 4 files changed, 8 insertions(+)

diff --git a/src/DatePicker/CalendarHeader.tsx b/src/DatePicker/CalendarHeader.tsx
index 8daf1c6c..15ae2b56 100644
--- 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
index 3df08105..df72387e 100644
--- 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
index 559163d1..50f99d00 100644
--- 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
index 1418ad49..02e9cfb1 100644
--- 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"