Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use native beforeinput events to handle text insertion when possible #1232

Merged
merged 5 commits into from
Oct 16, 2017

Conversation

rgrove
Copy link
Contributor

@rgrove rgrove commented Oct 15, 2017

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 synthetic onBeforeInput 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 the beforeinput event, so it fails the feature test for that event and will still use the synthetic onBeforeInput 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

This is an object mapping of DOM event names to booleans indicating
whether the browser supports that event.
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 synthetic `onBeforeInput` 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 ianstormtaylor#1177 for more background on this change.

Fixes ianstormtaylor#1176
Fixes ianstormtaylor#1177
@renchap
Copy link
Contributor

renchap commented Oct 15, 2017

@rgrove you can easily test for Edge on BrowserStack, Microsoft sponsored them to offer it for free: https://www.browserstack.com/test-on-microsoft-edge-browser#live-cloud

They also offer the service to OSS projects, it might be a good idea to contact them for this (I can do it if you want). Selenium testing might not be useful for now (but it would be great) but their live mode allows you to launch pretty much every browser/OS combinaison in 1 click which would help a lot to ensure Slate is compatible with the majors browsers.

PS: I am not affilited with them, but it saved me a lot of effort to achive compat with Edge on my app for free, so maybe it will for you too 🙂

@rgrove
Copy link
Contributor Author

rgrove commented Oct 16, 2017

Fixed a lint error and resolved recently introduced conflicts with master. Also tested Edge and confirmed that it continues to use the synthetic onBeforeInput code path.

@ianstormtaylor
Copy link
Owner

Thank you @rgrove this is a really great PR, and awesome research/testing. Thank you very much! Hopefully more browsers are quick to implement this and it will begin solving more mobile issues.

@ianstormtaylor ianstormtaylor merged commit 6378c12 into ianstormtaylor:master Oct 16, 2017
@rgrove rgrove deleted the fix-ios-autocorrect branch October 16, 2017 20:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants