react-native-web
react-native-web copied to clipboard
TextInput: onSelectionChange consistency with React Native
The problem
When you change the value of a controlled TextInput stored in the component's state the onSelectionChange event handler gets called but the state is not yet updated with the new value.
Doing things in the event handler with the input's value from state would result in bugs as you don't have the most recent one. Basically the selection is inconsistent with the value.
How to reproduce Simplified test case: https://codesandbox.io/s/4z5pjv38jw
Steps to reproduce:
- type a letter in the text input
- look at the console to check the value when the event handler is called
Expected behavior
The onSelectionChange handler should be called only after the value has changed in the state.
Environment (include versions). Did this work in previous versions?
- React Native for Web (version): 0.8.8
- React (version): 16.4.0
- Browser: Chrome
OK, after looking at the source code for the TextInput I think this is just how it's suppose to work and instead of getting the wrong value from the state you can get the right one from the handler's event argument like this:
onSelectionChange = ({ nativeEvent: { selection, text } }) => {}
I'm gonna close the issue for now.
Hmm, I'm reopening this since the text property on the nativeEvent doesn't seem to be documented (so it could go away) and it's probably not even supported by ReactNative.
Thoughts?
Testing this in React Native it seems to work as expected and when onSelectionChange gets called the state is already updated with the new value.
You can try it here: https://snack.expo.io/rJJfbOGmX