Submitting form triggers focus/blur events

[jonatanklosko]

Having phx-blur or phx-focus bindings on a form input, both events are triggered by submitting the form (pressing Enter), even though that's not a usual browser behaviour.

Example

defmodule PlaygroundWeb.PageLive do
  use PlaygroundWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    {:ok, assign(socket, events: [])}
  end

  @impl true
  def render(assigns) do
    ~L"""
    <h2>Events (oldest to newest)</h2>
    <div>
      <%= for {{event, params}, n} <- Enum.with_index(@events, 1) do %>
        <div>
          <%= n %>. <%= event %> (<%= inspect(params) %>)
        </div>
      <% end %>
    </div>
    <form phx-submit="submit">
      <div>
        A form with both submit and blur bindings.
        Pressing enter on the input triggers blur then submit.
      </div>
      <input
        type="text"
        name="name"
        autocomplete="off"
        phx-blur="blur"
        phx-focus="focus" />
    </form>
    """
  end

  @impl true
  def handle_event(event, params, socket) do
    {:noreply, assign(socket, events: socket.assigns.events ++ [{event, params}])}
  end
end

The state after typing in the input and submitting the form via Enter:

Use case

I recently had a form with a single input, submitting the form would trigger an operation, whereas blur would cancel it. I found out both events are submitted, and blur is actually handled first.

Context

Currently LV explicitly blurs the input when submitting the form and focuses back later on. Triggering the phx-blur and phx-focus seems unintuitive, but perhaps that's expected?

https://github.com/phoenixframework/phoenix_live_view/blob/7c17f8c607ed5a2421416706bd128622f90f2f01/assets/js/phoenix_live_view/live_socket.js#L645

https://github.com/phoenixframework/phoenix_live_view/blob/7c17f8c607ed5a2421416706bd128622f90f2f01/assets/js/phoenix_live_view/view.js#L1005

https://github.com/phoenixframework/phoenix_live_view/blob/7c17f8c607ed5a2421416706bd128622f90f2f01/assets/js/phoenix_live_view/live_socket.js#L404-L413

Environment

• Elixir version (elixir -v): 1.12.0
• Phoenix version (mix deps): 1.5.9
• Phoenix LiveView version (mix deps): 0.15.7
• NodeJS version (node -v): v14.9.0
• NPM version (npm -v): 7.5.4
• Operating system: Ubuntu 20.04.2 LTS x86_64
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome, Firefox

[simonmcconnell]

Blur event might have validation you want to run before submitting.

[jonatanklosko]

@simonmcconnell fair use case, though in cases where there's a disabled submit button the user would need to blur explicitly, so that the validation runs and the button is back enabled (submitting the form with enter while it looks disabled is definitely not intuitive), so it's more consistent to validate on change or on submit.

FTR my case involved a single input, so I managed to workaround the blur behaviour by using an Enter key listener instead of a form.

Also, it's probably fine if this is the expected behaviour, I opened the issue just to make sure that this is actually the case :)

[chrismccord]

Closing this for now. Can revisit in the future if it hits more folks. Thanks!