Fix TextInput onSelectionChange logic

packages/docs/src/components/TextInput/TextInput.stories.mdx

@@ -209,6 +209,12 @@ called with `{ nativeEvent: { selection: { start, end } } }`.
   </Story>
 </Preview>
 
+<Preview withSource='none'>
+  <Story name="onSelectionChangeControlled">
+    <Stories.onSelectionChangeControlled />
+  </Story>
+</Preview>
+
 ### onSubmitEditing
 
 Callback that is called when the keyboard's submit button is pressed. When

packages/docs/src/components/TextInput/examples/OnSelectionChange.js

@@ -2,106 +2,27 @@
  * @noflow
  */
 
-import React from 'react';
+import React, { useState } from 'react';
+import { View, Text, TextInput } from 'react-native';
 import { styles } from '../helpers';
-import { Text, TextInput, View } from 'react-native';
 
-type SelectionExampleState = {
-  selection: {
-    start: number,
-    end?: number
-  },
-  value: string
-};
+function OnSelectionChange() {
+  const [text, setText] = useState('');
+  const [selection, setSelection] = useState({ start: 0, end: 0 });
 
-class OnSelectionChangeExample extends React.Component {
-  state: SelectionExampleState;
-
-  _textInput: any;
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      selection: { start: 0, end: 0 },
-      value: props.value
-    };
-  }
-
-  onSelectionChange = ({ nativeEvent: { selection } }) => {
-    this.setState({ selection });
-  };
-
-  onChangeText = value => {
-    this.setState({ value });
-  };
-
-  getRandomPosition() {
-    const length = this.state.value.length;
-    return Math.round(Math.random() * length);
-  }
-
-  select = (start, end) => () => {
-    this._textInput.focus();
-    this.setState({ selection: { start, end } });
-  };
-
-  selectRandom = () => {
-    const positions = [this.getRandomPosition(), this.getRandomPosition()].sort();
-    this.select(...positions)();
-  };
-
-  placeAt = position => () => {
-    this.select(position, position)();
-  };
-
-  placeAtRandom = () => {
-    this.placeAt(this.getRandomPosition())();
-  };
-
-  setRef = textInput => {
-    this._textInput = textInput;
-  };
-
-  render() {
-    const length = this.state.value.length;
-
-    return (
-      <View>
-        <TextInput
-          multiline={this.props.multiline}
-          onChangeText={this.onChangeText}
-          onSelectionChange={this.onSelectionChange}
-          ref={this.setRef}
-          selection={this.state.selection}
-          style={this.props.style}
-          value={this.state.value}
-        />
-        <View>
-          <Text>selection = {JSON.stringify(this.state.selection)}</Text>
-          <Text onPress={this.placeAt(0)}>Place at Start (0, 0)</Text>
-          <Text onPress={this.placeAt(length)}>
-            Place at End ({length}, {length})
-          </Text>
-          <Text onPress={this.placeAtRandom}>Place at Random</Text>
-          <Text onPress={this.select(0, length)}>Select All</Text>
-          <Text onPress={this.selectRandom}>Select Random</Text>
-        </View>
-      </View>
-    );
-  }
+  return (
+    <View>
+      <TextInput
+        onChangeText={setText}
+        onSelectionChange={event => {
+          setSelection(event.nativeEvent.selection);
+        }}
+        style={styles.textinput}
+        value={text}
+      />
+      <Text>{JSON.stringify(selection)}</Text>
+    </View>
+  );
 }
 
-const TextInputOnSelectionChangeExample = () => (
-  <View>
-    <OnSelectionChangeExample style={styles.textinput} value="text selection can be changed" />
-    <OnSelectionChangeExample
-      multiline
-      style={styles.multiline}
-      value={'multiline text selection\ncan also be changed'}
-    />
-  </View>
-);
-
-export default function OnSelectionChange() {
-  return <TextInputOnSelectionChangeExample />;
-}
+export default OnSelectionChange;

packages/docs/src/components/TextInput/examples/OnSelectionChangeControlled.js

@@ -0,0 +1,107 @@
+/**
+ * @noflow
+ */
+
+import React from 'react';
+import { styles } from '../helpers';
+import { Text, TextInput, View } from 'react-native';
+
+type SelectionExampleState = {
+  selection: {
+    start: number,
+    end?: number
+  },
+  value: string
+};
+
+class OnSelectionChangeExample extends React.Component {
+  state: SelectionExampleState;
+
+  _textInput: any;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selection: { start: 0, end: 0 },
+      value: props.value
+    };
+  }
+
+  onSelectionChange = ({ nativeEvent: { selection } }) => {
+    this.setState({ selection });
+  };
+
+  onChangeText = value => {
+    this.setState({ value });
+  };
+
+  getRandomPosition() {
+    const length = this.state.value.length;
+    return Math.round(Math.random() * length);
+  }
+
+  select = (start, end) => () => {
+    this._textInput.focus();
+    this.setState({ selection: { start, end } });
+  };
+
+  selectRandom = () => {
+    const positions = [this.getRandomPosition(), this.getRandomPosition()].sort();
+    this.select(...positions)();
+  };
+
+  placeAt = position => () => {
+    this.select(position, position)();
+  };
+
+  placeAtRandom = () => {
+    this.placeAt(this.getRandomPosition())();
+  };
+
+  setRef = textInput => {
+    this._textInput = textInput;
+  };
+
+  render() {
+    const length = this.state.value.length;
+
+    return (
+      <View>
+        <TextInput
+          multiline={this.props.multiline}
+          onChangeText={this.onChangeText}
+          onSelectionChange={this.onSelectionChange}
+          ref={this.setRef}
+          selection={this.state.selection}
+          style={this.props.style}
+          value={this.state.value}
+        />
+        <View>
+          <Text>selection = {JSON.stringify(this.state.selection)}</Text>
+          <Text onPress={this.placeAt(0)}>Place at Start (0, 0)</Text>
+          <Text onPress={this.placeAt(length)}>
+            Place at End ({length}, {length})
+          </Text>
+          <Text onPress={this.placeAtRandom}>Place at Random</Text>
+          <Text onPress={this.select(0, length)}>Select All</Text>
+          <Text onPress={this.selectRandom}>Select Random</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+const TextInputOnSelectionChangeExample = () => (
+  <View>
+    <OnSelectionChangeExample style={styles.textinput} value="text selection can be changed" />
+    <OnSelectionChangeExample
+      multiline
+      style={styles.multiline}
+      value={'multiline text selection\ncan also be changed'}
+    />
+  </View>
+);
+
+export default function OnSelectionChange() {
+  return <TextInputOnSelectionChangeExample />;
+}

packages/docs/src/components/TextInput/examples/index.js

@@ -9,6 +9,7 @@ export { default as maxLength } from './MaxLength';
 export { default as multiline } from './Multiline';
 export { default as numberOfLines } from './NumberOfLines';
 export { default as onSelectionChange } from './OnSelectionChange';
+export { default as onSelectionChangeControlled } from './OnSelectionChangeControlled';
 export { default as placeholder } from './Placeholder';
 export { default as placeholderTextColor } from './PlaceholderTextColor';
 export { default as secureTextEntry } from './SecureTextEntry';