Android mentions fixes #5360
Merged
Android mentions fixes #5360
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Android keyboards use a composition text approach for autocomplete purposes. Chrome sees the mention text and thinks it is part of the word to complete. The simplest solution is to add zero width whitespace. This also adds a click handler on the mention example to help with the mobile (and desktop) testing experience.
|
|
This is ready for review. No changeset was added as the change is only to an example. |
edhager
approved these changes
Mar 15, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
This fixes the Android keyboard handling of mentions by moving the non visible space character after the mention. This PR also adds a click handler to the mention dropdown to make it easier to test on mobile.
Issue
Solves the issue where typing immediately after a mention on Android causes the text of the mention to be repeated.
Example
As tested on Chrome on a Pixel 5A.
Before:
screen-20230314-192518_2.mp4
After:
screen-20230314-192843_3.mp4
Note that an issue with a period before a mention still persists.
Context
The non-visible spacer is important for focus and mention styling. There are a lot of issues related to this character including possibly changing from the current \uFEFF character, but those changes should be orthogonal to this issue.
The reason this solution works is because the Android keyboard works with whole words rather than simply inputting one character at a time. This triggers before input events that compose multiple characters together. However in the case of void elements, the keyboard sees the text before the cursor and tries to include that in the autocomplete. When slate goes to enter the text, it assumes the text is entirely new and adds it on top of the existing text.
Closes #5357
Related Issues and PRs
Checks
yarn test.yarn lint. (Fix errors withyarn fix.)yarn start.)yarn changeset add.)