You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Click on one of the <input> fields and start typing. Notice that when the element gets moved, you might lose focus. (I noticed that it only happens when the node is moved down the DOM, not up. You can tell that the DOM node was not re-rendered: the input field keeps its value.
Schermopname.2023-12-18.om.18.23.23.mov
Expected behavior
The element should maintain focus. In react-dom, this works correctly. Try the following app in https://playcode.io/react
i don't think there's much preact can do - the DOM does not provide a method to reorder nodes without removing them from the parent, and if you do remove an element from the parent it inherently looses focus.
the only thing that may be possible is to avoid removing an element that is focused from the parent completely and only ever remove other nodes when reordering, but that sounds... complicated.
We used to have this in the beta phase of Preact X but the performance hit is extremely large when this has to be done on every diff, we could reduce this impact by doing it only at the setState level, let me see whether we can re-introduce that without significant performance hits.
EDIT: see PR for a valid comment about i.e. this not preventing pitfalls with video/...
Describe the bug
Moving children with a
key
attribute can cause a focused element in the child DOM to lose focus.To Reproduce
The following app demonstrates the issue on https://preactjs.com/repl
Click on one of the
<input>
fields and start typing. Notice that when the element gets moved, you might lose focus. (I noticed that it only happens when the node is moved down the DOM, not up. You can tell that the DOM node was not re-rendered: theinput
field keeps its value.Schermopname.2023-12-18.om.18.23.23.mov
Expected behavior
The element should maintain focus. In
react-dom
, this works correctly. Try the following app in https://playcode.io/reactSchermopname.2023-12-18.om.18.15.31.mov
The text was updated successfully, but these errors were encountered: