Livewire v3 Morphing: Preserving Input Focus in Dynamic Lists

DOM Diffing and State Persistence

Livewire v3 utilizes a redesigned morphing algorithm to minimize DOM churn during component updates. When rendering dynamic lists, the framework relies on the wire:key attribute to uniquely identify elements and ensure the client-side state remains synchronized with the server-side component state.

The Focus Loss Challenge

In complex nested layouts where elements are conditionally rendered or reordered, there is a risk of unpredictable DOM element swapping. This behavior can lead to the loss of input focus or the clearing of unsaved client-side state if the morphing logic cannot accurately map the old element to the new one.

Given the transition to the v3 morphing system, it is necessary to determine the exact requirements for key placement to prevent focus resets in deeply nested loops.

• Does the wire:key need to be present on the immediate parent of the input, or must it be on the outermost loop element?
• How does the morphing algorithm handle focus when a wire:key is present but the internal HTML structure of the element changes?