Submitting form on input focus (pressing enter) and dropdown is toggled instead of submitting
Prerequisites
- [x] I have searched for duplicate or closed issues
- [x] I have validated any HTML to avoid common problems
- [x] I have read the contributing guidelines
Describe the issue
Inside of a form tag, if I focus on an input element and press enter to submit, instead of submitting, it will toggle a all of the dropdowns that appear after it with the data-bs-toggle dropdown.
- Create form
- add input
- add dropdown with a button that has data-bs-toggle="dropdown" inside the form
- focus on input
- keydown 'enter'
- see dropdown toggled instead of the form submitting
This doesn't seem like it would be expected behavior
Reduced test cases
I have a minimal example running: https://codepen.io/andybeesee/pen/jEORdNm
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome, Firefox
What version of Bootstrap are you using?
5.3.5
<button> elements within <form> elements are automatically type="submit", so you have to set that to type="button". That would fix your issue for now. I'm unsure why exactly this is happening, but my guess is the enter on the input is jumping to the first submit button and because that button is getting focused, it's opening the menu.
I imagine there's something we can do to remedy this though.