From 358c31ed6b2ccc6964866af45f26f9c545e5a243 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 2 Feb 2024 09:43:45 -0800
Subject: [PATCH 1/5] Fix native `<button>`s missing `type="button"`

---
 .../super_date_picker/date_popover/date_popover_button.tsx       | 1 +
 .../date_picker/super_date_picker/super_date_picker.tsx          | 1 +
 2 files changed, 2 insertions(+)

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 536e1e178fb..db5f29793c3 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
@@ -109,6 +109,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 6e75c2e6396..c18c9c39b03 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
@@ -518,6 +518,7 @@ export class EuiSuperDatePickerInternal extends Component<
       return (
         <EuiFormControlLayout {...formControlLayoutProps}>
           <button
+            type="button"
             className={classNames('euiSuperDatePicker__prettyFormat', {
               'euiSuperDatePicker__prettyFormat--disabled': isDisabled,
             })}

From 882aefb0238e2dde5f71fc7bf8dc84be4ae10f3d Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 2 Feb 2024 09:43:52 -0800
Subject: [PATCH 2/5] snapshot

---
 .../__snapshots__/super_date_picker.test.tsx.snap     | 11 +++++++++++
 .../__snapshots__/date_popover_button.test.tsx.snap   |  1 +
 2 files changed, 12 insertions(+)

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>

From 959a81e295cfa468cd2bdc1012b344a20999c9fe Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 2 Feb 2024 09:46:23 -0800
Subject: [PATCH 3/5] changelog

---
 changelogs/upcoming/7504.md | 3 +++
 1 file changed, 3 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

From 728e9d1e0aa22adb28b11457da083b2e79771f45 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 2 Feb 2024 09:46:31 -0800
Subject: [PATCH 4/5] [REVERT ME] QA testing

---
 .../super_date_picker/super_date_picker.tsx      | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/views/super_date_picker/super_date_picker.tsx b/src-docs/src/views/super_date_picker/super_date_picker.tsx
index c2575fe0da0..2764be95323 100644
--- a/src-docs/src/views/super_date_picker/super_date_picker.tsx
+++ b/src-docs/src/views/super_date_picker/super_date_picker.tsx
@@ -84,13 +84,15 @@ export default () => {
     <>
       {renderTimeRange()}
       <EuiSpacer />
-      <EuiSuperDatePicker
-        isLoading={isLoading}
-        start={start}
-        end={end}
-        onTimeChange={onTimeChange}
-        onRefresh={onRefresh}
-      />
+      <form>
+        <EuiSuperDatePicker
+          isLoading={isLoading}
+          start={start}
+          end={end}
+          onTimeChange={onTimeChange}
+          onRefresh={onRefresh}
+        />
+      </form>
     </>
   );
 };

From ec0a71130a97eaa6714a245c3c13ef38d0f9be0b Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 6 Feb 2024 08:56:44 -0800
Subject: [PATCH 5/5] Revert "[REVERT ME] QA testing"

This reverts commit 728e9d1e0aa22adb28b11457da083b2e79771f45.
---
 .../super_date_picker/super_date_picker.tsx      | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src-docs/src/views/super_date_picker/super_date_picker.tsx b/src-docs/src/views/super_date_picker/super_date_picker.tsx
index 2764be95323..c2575fe0da0 100644
--- a/src-docs/src/views/super_date_picker/super_date_picker.tsx
+++ b/src-docs/src/views/super_date_picker/super_date_picker.tsx
@@ -84,15 +84,13 @@ export default () => {
     <>
       {renderTimeRange()}
       <EuiSpacer />
-      <form>
-        <EuiSuperDatePicker
-          isLoading={isLoading}
-          start={start}
-          end={end}
-          onTimeChange={onTimeChange}
-          onRefresh={onRefresh}
-        />
-      </form>
+      <EuiSuperDatePicker
+        isLoading={isLoading}
+        start={start}
+        end={end}
+        onTimeChange={onTimeChange}
+        onRefresh={onRefresh}
+      />
     </>
   );
 };