Skip to content

Instantly share code, notes, and snippets.

@browniefed
Last active September 5, 2016 21:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save browniefed/36fa79536e24769f0b99282b939b90c6 to your computer and use it in GitHub Desktop.
Save browniefed/36fa79536e24769f0b99282b939b90c6 to your computer and use it in GitHub Desktop.
Text mask issues

RN mask link https://github.com/text-mask/text-mask/blob/reactNativeMasks/reactnative/src/reactNativeTextMask.js

The reason why text-mask is better than others is it doesn'y rely on onKeyUp or any key events. This makes it much more reliable on mobile devices w/ Samsung generally screwing events up w/ custom browser crap they build on top of chrome.

It only deals with previous value, next value, and cursor position.

Those are all typically accessible in onChange (sync) which allows us to make reliable updates for the value, as well as the new cursor position. In RN they are 2 separate calls. So it makes it a little more difficult as rather than onChange things need to be handled in onSelectionChange

However when we then control the selection value via setNativeProps we get called again.

Ideally in onChange, new value as well as new cursor position would be exposed.

A new call that combines them all is a little less than ideal since most people rely on onChange and onChangeText. As well as the potential to use preventDefault. However I haven't seen a prevelance of this on RN much.

@janicduplessis
Copy link

I thinks we could normalize TextInput events to always include the selection, value and content size. That way no matter what event you use (either onChange, onSelectionChange or both) you get all the data you need to compute the new value and selection.

@janicduplessis
Copy link

I think the issue you have also is that onChange gets called before onSelectionChange this is why you have to skip the next onSelectionChange event after updating in onChange.

onChange -> update to new selection -> onSelectionChange without the previous update because setNativeProps is async

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment