[EuiSuperDatePicker] Fix usage within <form>s (#7504)

changelogs/upcoming/7504.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiSuperDatePicker` submit bug when used within `<form>` elements

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>

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>

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}

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,
             })}