phx-debounce=blur incorrectly sends a change event to the next page if you submit the form by pressing enter while still on the field.

[samanthamjohn]

Environment

• Elixir version (elixir -v): Elixir 1.15.7 (compiled with Erlang/OTP 26)
• Phoenix version (mix deps): phoenix 1.7.11 (Hex package) (mix)
• Phoenix LiveView version (mix deps): 0.20.12 (Hex package) (mix)
• Operating system: MacOS Sonoma 14.3.1
• Browsers you attempted to reproduce this bug on (the more the merrier): Brave, Safari, Arc,
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Setup

My HEEX template looks something like this (simplified)

   <.form          
          for={@form}
          phx-change="validate"
          phx-submit="submit"
        >
         <.input
              field={@form[:store_number]}
              type="text"         
              phx-debounce="blur"
            />
</.form> 

In the same live view I've defined

  def handle_event("validate", params, socket) do end

Submitting the form takes you to a new LiveView which does not handle the validate event.

Actual behavior

When I submit the form by pressing the Enter key without clicking out of the field, the next page receives the validate event and briefly throws an error before reloading.

Expected behavior

When I submit the form by pressing the Enter key without clicking out of the field, the validate event is never fired, and I go to the next page without validations.

OR

The validate event is fired on my original page before attempting to move to the next page.