diff --git a/CHANGELOG.md b/CHANGELOG.md index 81037145165..ad6a27c8890 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ - Fixed `inputRef` for `EuiCheckbox` ([#4298](https://github.com/elastic/eui/pull/4298)) - Limited the links allowed in `EuiMarkdownEditor` to http, https, or starting with a forward slash ([#4362](https://github.com/elastic/eui/pull/4362)) - Aligned components with an `href` prop to React's practice of disallowing `javascript:` protocols ([#4362](https://github.com/elastic/eui/pull/4362)) +- Fixed form submit bug in `EuiButtonGroup` by adding an optional `type` prop for `EuiButtonGroupOption` ([#4368](https://github.com/elastic/eui/pull/4368)) **Theme: Amsterdam** diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap index 0db6d7464d8..0d2dba2a90b 100644 --- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap +++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap @@ -18,6 +18,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2" data-test-subj="test subject string" id="button00" + type="button" > = [ @@ -30,7 +35,7 @@ const SIZES: Array = [ 'compressed', ]; -const options = [ +const options: EuiButtonGroupOptionProps[] = [ { id: 'button00', label: 'Option one', @@ -47,6 +52,7 @@ const options = [ label: 'Option three', iconType: 'bolt', isDisabled: true, + type: 'submit', }, ]; diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx index 6702a364b1c..8ec71fd9f6a 100644 --- a/src/components/button/button_group/button_group.tsx +++ b/src/components/button/button_group/button_group.tsx @@ -42,6 +42,10 @@ export interface EuiButtonGroupOptionProps * The value of the radio input. */ value?: any; + /** + * The type of the underlying HTML button + */ + type?: 'button' | 'submit' | 'reset'; } export type EuiButtonGroupProps = CommonProps & { @@ -179,7 +183,7 @@ export const EuiButtonGroup: FunctionComponent = ({ name={nameIfSingle} isDisabled={isDisabled} {...(option as EuiButtonGroupOptionProps)} - type={typeIsSingle ? 'label' : 'button'} + element={typeIsSingle ? 'label' : 'button'} isSelected={ typeIsSingle ? option.id === idSelected diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx index dea959ed661..de7e477d8a5 100644 --- a/src/components/button/button_group/button_group_button.tsx +++ b/src/components/button/button_group/button_group_button.tsx @@ -27,7 +27,7 @@ type Props = EuiButtonGroupOptionProps & { /** * Element to display based on single or multi */ - type: 'button' | 'label'; + element: 'button' | 'label'; /** * Styles the selected button to look selected (usually with `fill`) */ @@ -69,15 +69,16 @@ export const EuiButtonGroupButton: FunctionComponent = ({ onChange, size, value, + element = 'button', type = 'button', ...rest }) => { // Force element to be a button if disabled - const element = isDisabled ? 'button' : type; + const el = isDisabled ? 'button' : element; let elementProps = {}; let singleInput; - if (element === 'label') { + if (el === 'label') { elementProps = { ...elementProps, htmlFor: id, @@ -100,6 +101,7 @@ export const EuiButtonGroupButton: FunctionComponent = ({ ...elementProps, id, isSelected, + type, onClick: () => onChange(id), }; } @@ -123,7 +125,7 @@ export const EuiButtonGroupButton: FunctionComponent = ({