Skip to content

Commit 9b6cbb7

Browse files
alanleedevfacebook-github-bot
authored andcommitted
Add selection types to TextInput onChange event (facebook#55043)
Summary: This change adds TypeScript/Flow types and RNTester examples for the `selection` data in `TextInput.onChange` event. This is the JS companion to the native changes that add selection data to the onChange event. ## Why On the web, text input elements provide `selectionStart` and `selectionEnd` properties that are always accessible during input events. This change exposes the selection data that native now provides, allowing developers to access cursor position during onChange. ## What Changed 1. **Flow Types**: Added optional `selection?: Selection` to `TextInputChangeEventData` 2. **TypeScript Types**: Updated `ReactNativeApi.d.ts` with selection type 3. **RNTester**: Updated examples to display selection in event logs ## Changelog [General][Added] - TextInput onChange event types now include optional selection data Differential Revision: D90123294
1 parent 8a0b4c3 commit 9b6cbb7

File tree

3 files changed

+14
-5
lines changed

3 files changed

+14
-5
lines changed

packages/react-native/Libraries/Components/TextInput/TextInput.flow.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ type TextInputChangeEventData = $ReadOnly<{
2929
eventCount: number,
3030
target: number,
3131
text: string,
32+
selection?: Selection,
3233
}>;
3334

3435
export type TextInputChangeEvent =

packages/react-native/ReactNativeApi.d.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* This source code is licensed under the MIT license found in the
55
* LICENSE file in the root directory of this source tree.
66
*
7-
* @generated SignedSource<<bffba0612c645ddb6166e1f5bb1187f2>>
7+
* @generated SignedSource<<249ca589a73aaef41a965bcf3a2c0208>>
88
*
99
* This file was generated by scripts/js-api/build-types/index.js.
1010
*/
@@ -5277,6 +5277,7 @@ declare type TextInputChangeEvent =
52775277
NativeSyntheticEvent<TextInputChangeEventData>
52785278
declare type TextInputChangeEventData = {
52795279
readonly eventCount: number
5280+
readonly selection?: Selection
52805281
readonly target: number
52815282
readonly text: string
52825283
}
@@ -6189,15 +6190,15 @@ export {
61896190
TaskProvider, // 266dedf2
61906191
Text, // e55ac2e2
61916192
TextContentType, // 239b3ecc
6192-
TextInput, // cf7a3331
6193+
TextInput, // 2e89b91d
61936194
TextInputAndroidProps, // 3f09ce49
6194-
TextInputChangeEvent, // 380cbe93
6195+
TextInputChangeEvent, // 6821f629
61956196
TextInputContentSizeChangeEvent, // 5fba3f54
61966197
TextInputEndEditingEvent, // 8c22fac3
61976198
TextInputFocusEvent, // c36e977c
61986199
TextInputIOSProps, // 0d05a855
61996200
TextInputKeyPressEvent, // 967178c2
6200-
TextInputProps, // a817a7f7
6201+
TextInputProps, // c75f0362
62016202
TextInputSelectionChangeEvent, // a1a7622f
62026203
TextInputSubmitEditingEvent, // 48d903af
62036204
TextLayoutEvent, // 45b0a8d7

packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -393,7 +393,14 @@ class TextEventsExample extends React.Component<{...}, $FlowFixMe> {
393393
onFocus={() => this.updateText('onFocus')}
394394
onBlur={() => this.updateText('onBlur')}
395395
onChange={event =>
396-
this.updateText('onChange text: ' + event.nativeEvent.text)
396+
this.updateText(
397+
'onChange text: ' +
398+
event.nativeEvent.text +
399+
', selection: ' +
400+
(event.nativeEvent.selection != null
401+
? JSON.stringify(event.nativeEvent.selection)
402+
: 'undefined'),
403+
)
397404
}
398405
onContentSizeChange={event =>
399406
this.updateText(

0 commit comments

Comments
 (0)