bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard

Submitting form on input focus (pressing enter) and dropdown is toggled instead of submitting

Open andybeesee opened this issue 8 months ago • 1 comments

Prerequisites

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

Video of the problem is here

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

andybeesee avatar Apr 07 '25 16:04 andybeesee

<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.

mdo avatar Apr 10 '25 16:04 mdo