From c7f49741d75ce59bd35a9729d4d8d81bb37122b6 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Tue, 6 Feb 2024 09:22:28 -0800
Subject: [PATCH] [EuiSuperDatePicker] Fix usage within `<form>`s (#7504)

---
 changelogs/upcoming/7504.md                           |  3 +++
 .../__snapshots__/super_date_picker.test.tsx.snap     | 11 +++++++++++
 .../__snapshots__/date_popover_button.test.tsx.snap   |  1 +
 .../date_popover/date_popover_button.tsx              |  1 +
 .../super_date_picker/super_date_picker.tsx           |  1 +
 5 files changed, 17 insertions(+)
 create mode 100644 changelogs/upcoming/7504.md

diff --git a/changelogs/upcoming/7504.md b/changelogs/upcoming/7504.md
new file mode 100644
index 00000000000..98a468b0d2d
--- /dev/null
+++ b/changelogs/upcoming/7504.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiSuperDatePicker` submit bug when used within `<form>` elements
diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
index a40073d0d57..61d3d0abcea 100644
--- a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -41,6 +41,7 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
       <button
         class="euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
+        type="button"
       >
         Last 15 minutes
       </button>
@@ -109,6 +110,7 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
       <button
         class="euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
+        type="button"
       >
         Last 15 minutes
       </button>
@@ -241,6 +243,7 @@ exports[`EuiSuperDatePicker props isDisabled config object 1`] = `
   class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled"
   data-test-subj="superDatePickerShowDatesButton"
   disabled=""
+  type="button"
 >
   <span
     data-test-subj="customDisabledDisplay"
@@ -293,6 +296,7 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
         class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled"
         data-test-subj="superDatePickerShowDatesButton"
         disabled=""
+        type="button"
       >
         Last 15 minutes
       </button>
@@ -423,6 +427,7 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
       <button
         class="euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
+        type="button"
       >
         Last 15 minutes
       </button>
@@ -471,6 +476,7 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
       <button
         class="euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
+        type="button"
       >
         Last 15 minutes
       </button>
@@ -542,6 +548,7 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
       <button
         class="euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
+        type="button"
       >
         Last 15 minutes
       </button>
@@ -610,6 +617,7 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
       <button
         class="euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
+        type="button"
       >
         Last 15 minutes
       </button>
@@ -679,6 +687,7 @@ exports[`EuiSuperDatePicker renders 1`] = `
       <button
         class="euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
+        type="button"
       >
         Last 15 minutes
       </button>
@@ -755,6 +764,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
             class="euiDatePopoverButton euiDatePopoverButton--start euiDatePopoverButton-isSelected"
             data-test-subj="superDatePickerstartDatePopoverButton"
             title="~ 15 minutes ago"
+            type="button"
           >
             ~ 15 minutes ago
           </button>
@@ -775,6 +785,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
             class="euiDatePopoverButton euiDatePopoverButton--end"
             data-test-subj="superDatePickerendDatePopoverButton"
             title="now"
+            type="button"
           >
             now
           </button>
diff --git a/src/components/date_picker/super_date_picker/date_popover/__snapshots__/date_popover_button.test.tsx.snap b/src/components/date_picker/super_date_picker/date_popover/__snapshots__/date_popover_button.test.tsx.snap
index ac597bcbf18..b6a8ad9764c 100644
--- a/src/components/date_picker/super_date_picker/date_popover/__snapshots__/date_popover_button.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/date_popover/__snapshots__/date_popover_button.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`EuiSuperUpdateButton renders 1`] = `
       class="euiDatePopoverButton euiDatePopoverButton--start"
       data-test-subj="superDatePickerstartDatePopoverButton"
       title=""
+      type="button"
     />
   </div>
 </div>
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
index e238d0df208..ce7363052ac 100644
--- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
+++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
@@ -110,6 +110,7 @@ export const EuiDatePopoverButton: FunctionComponent<
 
   const button = (
     <button
+      type="button"
       onClick={onPopoverToggle}
       className={classes}
       title={title}
diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx
index 4c7af4498e3..8c2b2fc1fff 100644
--- a/src/components/date_picker/super_date_picker/super_date_picker.tsx
+++ b/src/components/date_picker/super_date_picker/super_date_picker.tsx
@@ -529,6 +529,7 @@ export class EuiSuperDatePickerInternal extends Component<
       return (
         <EuiFormControlLayout {...formControlLayoutProps}>
           <button
+            type="button"
             className={classNames('euiSuperDatePicker__prettyFormat', {
               'euiSuperDatePicker__prettyFormat--disabled': isDisabled,
             })}