Set some <button> elements to type="button" (#1764)

* Set type attribute on a few buttons to 'button' instead of the default 'submit' * changelog
elastic · Mar 25, 2019 · 84d87fc · 84d87fc
1 parent 9595574
commit 84d87fc
Show file tree

Hide file tree

Showing 9 changed files with 12 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 - Set `h1 through h6, p` tags font reset based on family, size, and weight ([#1760](https://github.com/elastic/eui/pull/1760))
 - Fixed `EuiButton` font size inheritence ([#1760](https://github.com/elastic/eui/pull/1760))
+- Updated button elements in `EuiFilePicker`, `EuiFormControlLayoutClearButton`, `EuiFormControlLayoutCustomIcon`, `EuiListGroupItem`, and `EuiSideNavItem` to type=button ([#1764](https://github.com/elastic/eui/pull/1764))
 
 ## [`9.5.0`](https://github.com/elastic/eui/tree/v9.5.0)
 

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
@@ -42,6 +42,7 @@ exports[`EuiComboBox is rendered 1`] = `
           aria-label="Open list of options"
           class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
           data-test-subj="comboBoxToggleListButton"
+          type="button"
         >
           <svg
             aria-hidden="true"
@@ -276,6 +277,7 @@ exports[`props options list is rendered 1`] = `
           aria-label="Close list of options"
           class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
           data-test-subj="comboBoxToggleListButton"
+          type="button"
         >
           <svg
             aria-hidden="true"

diff --git a/src/components/form/file_picker/file_picker.js b/src/components/form/file_picker/file_picker.js
@@ -106,6 +106,7 @@ export class EuiFilePicker extends Component {
             if (compressed) {
               clearButton = (
                 <button
+                  type="button"
                   aria-label={clearSelectedFiles}
                   className="euiFilePicker__clearButton"
                   onClick={this.removeFiles}

diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
@@ -28,6 +28,7 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = `
         aria-label="Clear input"
         class="euiFormControlLayoutClearButton customClass"
         data-test-subj="clearButton"
+        type="button"
       >
         <svg
           class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"

diff --git a/src/components/form/form_control_layout/form_control_layout_clear_button.js b/src/components/form/form_control_layout/form_control_layout_clear_button.js
@@ -16,6 +16,7 @@ export const EuiFormControlLayoutClearButton = ({
     <EuiI18n token="euiFormControlLayoutClearButton.label" default="Clear input">
       {label => (
         <button
+          type="button"
           className={classes}
           onClick={onClick}
           aria-label={label}

diff --git a/src/components/form/form_control_layout/form_control_layout_custom_icon.js b/src/components/form/form_control_layout/form_control_layout_custom_icon.js
@@ -22,6 +22,7 @@ export const EuiFormControlLayoutCustomIcon = ({
   if (onClick) {
     return (
       <button
+        type="button"
         onClick={onClick}
         className={classes}
         ref={iconRef}

diff --git a/src/components/list_group/__snapshots__/list_group_item.test.js.snap b/src/components/list_group/__snapshots__/list_group_item.test.js.snap
@@ -152,6 +152,7 @@ exports[`EuiListGroupItem props onClick is rendered 1`] = `
 >
   <button
     class="euiListGroupItem__button"
+    type="button"
   >
     <span
       class="euiListGroupItem__label"
@@ -254,6 +255,7 @@ exports[`EuiListGroupItem renders a disabled button even if provided an href 1`]
   <button
     class="euiListGroupItem__button"
     disabled=""
+    type="button"
   >
     <span
       class="euiListGroupItem__label"
@@ -272,6 +274,7 @@ exports[`EuiListGroupItem renders a disabled button even if provided an href 2`]
   <button
     class="euiListGroupItem__button"
     disabled=""
+    type="button"
   >
     <span
       class="euiListGroupItem__label"

diff --git a/src/components/list_group/list_group_item.js b/src/components/list_group/list_group_item.js
@@ -104,6 +104,7 @@ export const EuiListGroupItem = ({
   } else if ((href && isDisabled) || onClick) {
     itemContent = (
       <button
+        type="button"
         className="euiListGroupItem__button"
         disabled={isDisabled}
         onClick={onClick}

diff --git a/src/components/side_nav/side_nav_item.js b/src/components/side_nav/side_nav_item.js
@@ -26,6 +26,7 @@ const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => {
   if (onClick) {
     return (
       <button
+        type="button"
         className={className}
         onClick={onClick}
         role="menuitem"