Button Input Interaction

Today I learned

I discovered a weird interaction: When an input inside a form has focus and the user presses enter, the click handler for the next button in the same form is triggered.

<form>
  <label>
    Text input
    <input type="text" value="abc">
  </label>
  <button id="b">Button with click handler</button>
  <script type="module">
    document.getElementById("b").addEventListener("click", function (event) {
      console.log("click from" , event.target);
      event.preventDefault();
    });
  </script>
</form>

This does not happen if the input and button are not inside a form. It also means that if the button is for a different form it will also not happen.

<form>
  <label>
    Text input
    <input type="text" value="abc">
  </label>
  <button id="b" form="otherForm">Button with click handler</button>
  <script type="module">
    document.getElementById("b").addEventListener("click", function (event) {
      console.log("click from" , event.target);
      event.preventDefault();
    });
  </script>
</form>
<form id="otherForm"></form>

Another way to solve this, is to use any other element as a button that do not have the automatic behaviour of being the submitter. At the cost of semantics.