chrisglein
commented
4 years ago The text string is being programmatically replaced. The expectation stated here is that the cursor is stable as a result of how TextInput.selection is being managed. Relevant bits of code here:
function replace(previous, range, chars) {
const text = previous.slice(0, range.start) + chars + previous.slice(range.end)
const sel = range.start + chars.length
return {
text,
selection: {start: sel, end: sel}
}
} onSelectionChange = evt => {
console.log('onSelectionChange: ', evt.nativeEvent)
let nextSelection = evt.nativeEvent.selection
if (!this.inputEvent) {
return this.setState({selection: nextSelection})
}
const {previousText, text, range} = this.inputEvent
let nextText = replace(this.state.text, range, text).text
delete this.inputEvent
function replaceInputWith(chars) {
const result = replace(previousText, range, chars)
nextText = result.text
nextSelection = result.selection
}
switch (text) {
case '@': {
replaceInputWith('@Mihail')
break
}
case '\n': {
replaceInputWith('\n- ')
break
}
}
this.setState({
text: nextText,
selection: nextSelection
})
} <TextInput
selection={this.state.selection}
value={this.state.text}
placeholder={'Say Something'}
onSelectionChange={this.onSelectionChange}
onChange={this.onChange}
onChangeText={this.onChangeText}
onTextInput={this.onTextInput}
onKeyPress={this.onKeyPress}
multiline
autoFocus
/>
kelset
fabOnReact
JoshuaGross
garrettm
todorone
focux
velidan
| 
|
jocoders
kyoz
mir1198yusuf
apfritts
Sanath91009
ZComwiz
joemun
This issue is a continuation of the discussion: https://github.com/facebook/react-native/commit/dff490d140010913d3209a2f3e987914b9c4eee4#commitcomment-39332764 The link to the sample project that demonstrates the issues: https://github.com/Ginger-Labs/Input-bug
Description
Controlled selection seems to be broken on both ios and android, to demonstrate the issues I created a sample project (find the link above).
React Native version:
System: OS: macOS 10.15.4 CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz Memory: 1.55 GB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 10.14.2 - /usr/local/bin/node Yarn: 1.13.0 - /usr/local/bin/yarn npm: 6.14.5 - ~/.npm-global/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2 Android SDK: API Levels: 23, 24, 25, 26, 27, 28, 29 Build Tools: 26.0.3, 28.0.3, 29.0.0, 30.0.0 System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64 Android NDK: 21.1.6352462 IDEs: Android Studio: 3.6 AI-192.7142.36.36.6392135 Xcode: 11.5/11E608c - /usr/bin/xcodebuild npmPackages: react: ~16.9.0 => 16.9.0 react-native: ~0.62.2 => 0.62.2 npmGlobalPackages: create-react-native-app: 3.4.0 react-native-app-id: 0.0.5 react-native-cli: 2.0.1
Steps To Reproduce
The reproduction steps are in the sample project's ReadMe file. For simplicity purposes, I will post them here as well:
SIM - iPhone 11 (13.4.1): 1) Click on the "Click Me" Button, set the cursor in the middle, add some text, click on the button again: Notice the text is set to needed one but the selection is not 10 2) Input text: "Hello world", move cursor in between words, click on "@": Expected: "Hello @Mihailworld" with the cursor at 13 Actual: "Hello @Mihailworld" with the cursor at the end of the whole string.
SIM - nexus 6P API28 1) Add text, click on enter (new line). Expected: The text stays and a new line is created with "-" in front. Actual: The first line becomes empty and the second line "-". 2) Press enter twice and you will get a:
Exception in native call java.lang.IndexOutOfBoundsException: setSpan (6 ... 6) ends beyond length 33) Press "@" twice and observe the same bug above.Expected Results
I expect the TextInput to work as intended (unless I am missing something conceptual).
Snack, code example, screenshot, or link to a repository:
https://github.com/Ginger-Labs/Input-bug