Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This issue originated from the Focus Fighting.
The simplest demo is shown below, and you can reproduce this issue in react-focus-lock stories/FocusFighting.js as well.
When focus-stealing occurs, the conflict is detected but not actually prevented. You can see from the console output that the focus is still being taken over continuously. It seems like the async operation successfully steals the focus, which can affect behaviors like IME input.
I believe this is caused by the priority of asynchronous tasks. Here, the deferAction is setTimeout(x, 1), which doesn't wait for all callbacks to complete. This releases the lock, leading to constant contention.
So here I changed the setTimeout time to 2ms. Our goal has never been to actually delay but to adjust the priority. Calling element.focus() directly is a synchronous task, so the asynchronous lock has to wait for all previous asynchronous tasks to complete.