Fix sticky cursor resulting in reverse typing if the editable is not the activeElement in the document. #16066
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 PR attempts to fix an issue with cases where "reverse typing" effect still occurs. This is caused by a selection not being updated when an input event occurs. The selection seems to not be updated because the
document.activeElement
in DOM is not the correct element.There are cases where the editable visually looks focused, but in reality the active element is some other element as it may have stole focus while the editable was active at some point. This can be caused by a manual dispatch of a
blur
event for example.We can actually simulate it like this:
If the editable is currently in focus, but the
blur
happens later, the active element in thedocument
is not updated properly, and can end up having a selection which is out of sync with the characters being rendered into the editable. (It just sticks and never moves forward).An example:
Something like this can also be seen in the Safari web browser where a a
button
click can cause the issue to occur:Source
After fix:
Browsers tested on web (manual):
Suggested merge commit message (convention)
Type: (engine): Force the editable to be focused if the active element is not the editable when an input event occurs. Closes #15182, #14702 .
Additional information
For example – encountered issues, assumptions you had to make, other affected tickets, etc.