Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiBadge] Add button type to prevent form submission #4479

Merged
merged 5 commits into from
Feb 3, 2021

Conversation

thompsongl
Copy link
Contributor

@thompsongl thompsongl commented Feb 2, 2021

Summary

Fixes #4273 by adding type=button to the "remove" button on the EuiBadge items rendered by EuiComboBox.
The problem comes from the default button type=submit being triggered when Enter was hit on an input element in a form with onSubmit/action.

What should happen? The onSubmit handler of the form should be triggered, the combo box should not react at all

This is half true. The combobox should indeed not react, but the form should not submit without a type=submit element in the form. The spec says that in a form with no submit buttons, implicit submission will be done if only one input is present.

So you can see in the to-be-reverted docs change that the combobox no longer steals focus, but the form will not be submitted without uncommenting the submit input.

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile

  • Checked in Chrome, Safari, Edge, and Firefox

- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation

- [ ] Added or updated jest tests

  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_4479/

Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Pulled & tested locally, including with & without the extra text input and/or submit button. Form submission only happened when expected.

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_4479/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[EuiComboBox] Steels key events of form
3 participants