react-native-web icon indicating copy to clipboard operation
react-native-web copied to clipboard

TextInput: onSelectionChange consistency with React Native

Open nickdima opened this issue 7 years ago • 3 comments

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:

  1. type a letter in the text input
  2. 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

nickdima avatar Jul 10 '18 15:07 nickdima

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.

nickdima avatar Jul 10 '18 16:07 nickdima

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?

nickdima avatar Jul 10 '18 16:07 nickdima

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

nickdima avatar Jul 10 '18 17:07 nickdima