Keyboard focus is left unpredictable after push_patch in Phoenix LiveView

In Phoenix LiveView, the framework does not define a default focus target after push_patch or push_navigate. Because LiveView patches the DOM via WebSockets rather than performing a full page reload, the element that held focus is often removed or replaced, causing the browser to reset focus to the or lose it entirely.

Why focus is lost

The behavior stems from how LiveView manages the DOM diffing. When push_patch is called, LiveView calculates the difference between the current and new state and updates only the necessary nodes. If the element that triggered the patch is part of the content being replaced, the browser loses the focus context. Unlike a traditional page navigation where the browser naturally starts at the top of the document, LiveView's partial updates leave the focus in an indeterminate state for keyboard and screen-reader users.

push_patch vs. push_navigate

In current releases (Phoenix 1.7+), the behavior is largely consistent between both methods regarding native focus:

• push_patch: Updates the current view. If the triggering element is swapped out, focus is lost or reset to the body.
• push_navigate: Changes the entire view/URL. While it feels like a navigation, it is still a DOM patch. It does not automatically move focus to the new or the main container unless explicitly instructed.

Resolution: Explicit handling via phx-hooks

Since the framework does not provide a global declarative focus target, the intended long-term solution is explicit per-app handling using phx-hook. This allows you to intercept the lifecycle events and manually move focus to a logical element.

Example of a hook to restore focus to a main heading after a patch:

let hook = {
  mounted() {
    this.focus;
    // Wait for the next tick to ensure the patch is applied
    const header = this.el.querySelector('h1');
    if (header) {
      header.focus();
    }
  }
}

To use this, register the hook in your hook.js and apply it to your main container: <div phx-hook="FocusHeader">...</div>.

Are you attempting to return focus to the specific element that triggered the action, or to the top of the new content? (This diagnostic detail determines the specific hook logic required.)