ios on selectionChange does not work with multiline set to true

[VivekNeel]

Description

I have a basic text input with multiline set to true. Additionally it has selection and onSelectionChange props set which causes cursor to move to initial position whenever there is change in onChangeText.

Here it's the video : https://streamable.com/bchsz4

Here it's the repro : https://github.com/VivekNeel/IOS_SELECTION_CHANGE Here it's the sample code :

  <TextInput
      onChangeText={handleChange}
      value={value}
      multiline
      selection={selection}
      onSelectionChange={handleSelection}
      placeholder="Enter a text"
      style={{marginTop: 100, marginHorizontal: 16}}
    />

React Native version:

  "react": "16.13.1",
    "react-native": "0.63.3"

Steps To Reproduce

1. clone https://github.com/VivekNeel/IOS_SELECTION_CHANGE
2. run yarn run ios and type some thing in the text input

Expected Results

when typing in a text input using selection , onSelectionChange and multilne, cursor position should not get reset

Snack, code example, screenshot, or link to a repository:

https://github.com/VivekNeel/IOS_SELECTION_CHANGE https://stackoverflow.com/questions/64639411/ios-react-native-onselectionchange-moves-cursor-to-initial-position-when-multlin

[rnike]

I put console.log in node_modules/react-native/Libraries/Components/TextInput/TextInput.js and found out the onChange and onSelectionChange orders are different between multi-line and single-line TextInput

single-line: onChange -> onSelectionChange

multi-line: onSelectionChange -> onChange

Not sure but it seems like a bug because of this comment, it says:

 JavaScript depends on `onChange` to be called before `onSelectionChange`

[VivekNeel]

I put console.log in node_modules/react-native/Libraries/Components/TextInput/TextInput.js and found out the onChange and onSelectionChange orders are different between multi-line and single-line TextInput

single-line: onChange -> onSelectionChange

multi-line: onSelectionChange -> onChange

Not sure but it seems like a bug because of this comment, it says:

 JavaScript depends on `onChange` to be called before `onSelectionChange`

Do you know of a way to get selection from either ref or native props?

I know we can use setNativeProps, but am looking for a way to getSelection

[rnike]

@VivekNeel For me I'll just use onSelectionChange and get it from using useState, it's simpler. If you don't want the cursor position to be reset on text changed, just remove the selection prop of the TextInput, like below

<TextInput
          onChangeText={handleChange}
          value={value}
          multiline
          // selection={selection}   <----- remove this
          onSelectionChange={handleSelection}
          placeholder="Enter a text"
          style={{marginTop: 100, marginHorizontal: 16}} />

[jasongaare]

I'm experiencing this exact issue too, however I need the the selection prop on my component, because at times I want to dictate the select when the user is moving the cursor around.

Generally if I am not dictating the selection I can set it to undefined a la:

this.setState({ selection: undefined })

<TextInput
  selection={this.state.selection}
   ...
/>

but when I do need to set the selection (I am highlighting an entire word in some cases whenever the cursor position lands within the word), the behavior is as described above, where the order those are called resets the cursor position to 0.

I've yet to find a good workaround for this yet

[jasongaare]

actually for now, I've found that using setNativeProps to control selection, rather than using the prop on the text input, seems to be an adequate workaround, one that does not trigger the undesired onChange

https://github.com/facebook/react-native/issues/29780#issuecomment-716971630

[github-actions[bot]]

This issue is stale because it has been open 365 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[eeshankeni]

Damn this problem still exists in 2023. My cursor keeps moving to the first position when selection is used. Fortunately setNativeProps can be used to force the cursor to go wherever i want it to.

[cubuspl42]

This issue deserves some love 💔

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[hannojg]

This looks like it was never fixed, but I just want to add that I can't reproduce this on version 0.73.x new arch