Description
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-2435M CPU @ 2.40GHz
Memory: 101.08 MB / 10.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.1 - /usr/local/bin/node
Yarn: 1.5.1 - /usr/local/bin/yarn
npm: 6.4.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Xcode: 9.4/9F1027a - /usr/bin/xcodebuild
npmPackages:
@types/react: ^16.4.14 => 16.4.14
@types/react-native: ^0.57.0 => 0.57.0
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1
Description
onSelectionChange method of TextInput does not return proper value when you use TextInput in single mode (not set multiline = {true}).
Reproducible Demo
// App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TextInput} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props)
this.state = {
selection: {start: 0, end: 0},
text: 'This is a sample text',
}
}
render() {
return (
<View style={styles.container}>
<Text>{this.state.selection.start}, {this.state.selection.end}</Text>
<TextInput
style={{ width: 300, borderColor: 'gray', borderWidth: 1 }}
onSelectionChange={({ nativeEvent: { selection } }) => {
this.setState({ selection })
}}
onChangeText={(text) => this.setState({ text })}
value={this.state.text}
/>
</View>
);
}
}Run the code, if you select the part of text in TextInput, you need to see the number of start and end of selection, but you don't see anything unless you start to type, or cut the selected part, if the text is change the selection numbers appear.
After select the part of text, the result is like following image:
But if you add multiline = {true} it works properly.
