chinedufn / percy

Build frontend browser apps with Rust + WebAssembly. Supports server side rendering.
https://chinedufn.github.io/percy/
Apache License 2.0
2.25k stars 84 forks source link

Preserve focusable elements #189

Closed chinedufn closed 1 year ago

chinedufn commented 1 year ago

This commit make our diffing algorithm prefer to moving focusable elements such as inputs and textareas over removing and recreating them.

This is meant to prevent scenarios where our diff/patch would lead to an input element losing focus, such as when prepending a sibling element before an input element.

For example, before this commit the following start and end virtual dom would lead to us recreating the input element and so it would lose focus.

Start: <div> <input /> </div>
End: <div> <br /> <input /> </div>

As of this commit the input element will no longer lose focus.

We accomplish this by treating focusable elements such as inputs and textareas in much the same way that we treat keyed elements, such that the diffing algorithm attempts to, when possible, move them instead of recreate them.