React-native: Android TextInput setting selection props beyond 0 on mount crash

[lxcid]

When I set selection props on <TextInput /> that is above 0 (e.g. { start: 1, end: 1 }), it will crash at setSpan()…

e.g.

<TextInput multiline={true} selection={{ start: 1, end: 1 }}>
  <Text>abc</Text>
</TextInput>

It seems like the text are not set before selection is applied, thereby causing the crash. Crash log stack trace provided below.

Environment

Environment:
  OS: macOS High Sierra 10.13.3
  Node: 9.2.0
  Yarn: 1.3.2
  npm: 5.5.1
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.53.2 => 0.53.2

Expected Behavior

I would expect it to not crash and set the selection correctly.

Actual Behavior

It crashes with the following stack trace…

setSpan (1 ... 1) ends beyond length 0

Error while updating property 'selection' of a view managed by: AndroidTextInput

null

setSpan (1 ... 1) ends beyond length 0
updateViewProp
    ViewManagersPropertyCache.java:92
setProperty
    ViewManagerPropertyUpdater.java:129
updateProps
    ViewManagerPropertyUpdater.java:48
updateProperties
    ViewManager.java:34
createView
    NativeViewHierarchyManager.java:233
execute
    UIViewOperationQueue.java:153
dispatchPendingNonBatchedOperations
    UIViewOperationQueue.java:1010
doFrameGuarded
    UIViewOperationQueue.java:981
doFrame
    GuardedFrameCallback.java:31
doFrame
    ReactChoreographer.java:136
doFrame
    ChoreographerCompat.java:107
run
    Choreographer.java:856
doCallbacks
    Choreographer.java:670
doFrame
    Choreographer.java:603
run
    Choreographer.java:844
handleCallback
    Handler.java:739
dispatchMessage
    Handler.java:95
loop
    Looper.java:148
main
    ActivityThread.java:5417
invoke
    Method.java
run
    ZygoteInit.java:726
main
    ZygoteInit.java:616

Steps to Reproduce

https://snack.expo.io/@lxcid/textinput-selection-crash

Open the snack in Android and uncomment the line with selection={{ start: 1, end: 1 }}…

<TextInput
  // selection={{ start: 0, end: 0 }} // Uncomment and it does not crash
  // selection={{ start: 1, end: 1 }} // Uncomment and it crash in android
  style={styles.paragraph}
  multiline={true}>

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest stable release?

Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[akalin-keybase]

Previous discussion: https://github.com/facebook/react-native/issues/17236

[akalin-keybase]

I have a workaround in https://github.com/akalin-keybase/rn-text-input-bugs , which is to wait for the next onSelectionChange event and set the selection there. Per the bug I linked above, this crash also happens if you set the text and selection at the same time, and the selection is out of bounds of the old text.

If the text box has focus, Android seems to fire onSelectionChange after the new text is applied, so that's why the workaround works. If the text box doesn't have focus (e.g., you're changing the text programmatically) an onSelectionChange isn't fired, but the selection isn't visible anyway, so it's safe to wait until the user focuses (which triggers an onSelectionChange) to set the new selection.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[akalin-keybase]

Pretty sure this is still crashing.

[wenkangzhou]

+1

[shenyute]

The root cause is due to setSelection and setText are handled in different mechanism. Seletion is by set property and Text is handled by extra data update. And extra data update will be hanled after all properties are set.

[shenyute]

Make a pull request here:
https://github.com/facebook/react-native/pull/22723

[thymikee]

Closing, as #22723 was recently merged and will be available in 0.60 release. Thanks @shenyute!

[russelRajitha]

still have same issue in react native 0.60.5.

[anjananeema1102]

Closing, as #22723 was recently merged and will be available in 0.60 release. Thanks @shenyute!

Still not working in 0.61.3 release. Any solution for same?

[mjmasn]

@thymikee This is still very much an issue in 0.61.5 release. The workaround at https://github.com/akalin-keybase/rn-text-input-bugs/blob/master/App.js also doesn't work.

We tried some workarounds with setNativeProps for text and selection, but still getting crashes.

It looks like if you set the selection prop, or call setNativeProps({selection: {...}) then you'll always get 2 onSelectionChanged events for the price of one when you type. The first with the accurate numbers then the second with the last values set with selection or setNativeProps({selection: {...}). Causes cursor flicker/misplacement while typing, and crashes if you hit backspace.

Our use case is inserting emoji and mentions into a message input, while maintaining the correct selection.

I'll try to make a simple repro when I have a minute.

Arguably trying to set selection outside of the available range shouldn't crash the entire app anyway. Sure I can see arguments for both sides but IMO it should select from the start point to the end of the text if the end is out of range, or move the cursor to the end of the text if the entire selection is out of range.

System:
    OS: Linux 5.0 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
    Memory: 1.12 GB / 15.53 GB
    Shell: 5.4.2 - /usr/bin/zsh
  Binaries:
    Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
    Yarn: 1.19.2 - /usr/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v12.11.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.0, 28.0.1, 28.0.2, 28.0.3, 29.0.2
      System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1

[mjmasn]

Doesn't look finished but https://github.com/facebook/react-native/commit/7ab5eb4cafdea695c4c53ce2a737f6302afd6380 might solve this one day as it adds a setTextAndSelection method.

[mjmasn]

Repro: https://github.com/mjmasn/SelectionCrash

[mjmasn]

@russelRajitha @Anjy123 see https://github.com/mjmasn/SelectionCrash/pull/1 for a new workaround. Haven't noticed any issues with it yet but feel free to try it and let me know how it goes.

[YoranRoels]

@russelRajitha @Anjy123 see mjmasn/SelectionCrash#1 for a new workaround. Haven't noticed any issues with it yet but feel free to try it and let me know how it goes.

Experiencing the same issues (only on Android) with a use case similar to yours, this fix did it for me. Thanks!