Use native beforeinput
events to handle text insertion when possible
#1232
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.
In browsers that support it (currently only Safari has full support), the native
beforeinput
DOM event provides much more useful information about text insertion than React's syntheticonBeforeInput
event.By handling text insertion with the native event instead of the synthetic event when possible, we can fully support autocorrect, spellcheck replacements, and related functionality on iOS without resorting to hacks.
See the discussion in #1177 for more background on this change.
Note: Chrome has partial support for
beforeinput
, but doesn't allow the event to be canceled and doesn't reliably provide information about the affected range. Possibly because of this, Chrome doesn't report the existence of thebeforeinput
event, so it fails the feature test for that event and will still use the syntheticonBeforeInput
code path.I've tested this change extensively in macOS Safari, iOS Safari, Chrome, and Firefox. Don't have access to Edge at the moment, but I plan to test it next week (I expect it to fail the event feature test and use the synthetic
onBeforeInput
code path). More testing would be appreciated! I'm especially curious how this works on Android Chrome, but I don't have a device to test with right now.Fixes #1176
Fixes #1177