Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Change in v10.11.1 causes inputs to lose focus on DOM changes

See original GitHub issue

Check if updating to the latest Preact version resolves the issue (no)

Describe the bug Up to preact v10.11.0 changes in the DOM did not cause a focused input to lose focus. Starting with v10.11.1 the input loses focus.

To Reproduce

Steps to reproduce the behavior:

Check out https://github.com/jcestibariz/bug-preact-focus
Notice preact is locked to v10.11.0 which does not contain the bug
Run npm i and then npm start
In the browser click on the input and press backspace
Notice the last “tag” is removed but the input keeps focus.
Go back to the console and press Ctrl+C to stop the server
Run npm i preact@10.11.1 and then npm start
Go back to the browser and repeat step 4
Notice now the input loses focus
You can also check with the latest version (v10.11.3 as of this moment) the bug is still present

Expected behavior The input should not lose focus when DOM changes.

Issue Analytics

State:
Created 10 months ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

JoviDeCroockcommented, Dec 5, 2022

Reverting it would not be the right course of action as the PR solves an issue with unmounting fragments, dissecting the issue though points at a bigger one 😅 so first off, the reproduction isn’t using keys for a changing list of elements, which does hint that these remounts are intended. Going further, when we add the keys, in this reproduction, we can see that the focus is lost when we remove the first element but not the second time around which does point that we are dealing with a matching issue of or dom or vnodes.

PR for reference https://github.com/preactjs/preact/pull/3738 - we might need to tweak this to better account for the two cases.

1reaction

jcestibarizcommented, Nov 26, 2022

I ran a git bisect and looks like the commit that caused this bug is:

284a8b0d969f8ef3a3eeff0107b0104a52f774ad is the first bad commit
commit 284a8b0d969f8ef3a3eeff0107b0104a52f774ad
Author: Jovi De Croock <decroockjovi@gmail.com>
Date:   Thu Sep 29 10:42:24 2022 +0200

    remove _nextDom resetting as it collides with nested fragment switching (#3738)

 src/diff/children.js           | 11 ------
 test/browser/fragments.test.js | 78 +++++++++++++++++++++++++++++++++++++++---
 2 files changed, 73 insertions(+), 16 deletions(-)

I reverted this change on top of the current master (d4089df1263faab9b980a3493a4c7e986f254f8e) and I can confirm that reverting this change fixes the bug. Since I don’t have enough knowledge of preact’s internals to tell @JoviDeCroock 's intention, I won’t submit this revert as the solution.