Skip to content

Commit a157205

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. NOTE:selection only represents the cursor location when returned via onChange as this will not be invoked on a pure selection change without text change. We should also add this note to the documentation. ## 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 Reviewed By: cipolleschi, necolas Differential Revision: D90123294
1 parent 162627a commit a157205

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<<9504863966549f8efbbe4e13d7f74eaf>>
7+
* @generated SignedSource<<99e87935a1173976a04d45d4e55bfa89>>
88
*
99
* This file was generated by scripts/js-api/build-types/index.js.
1010
*/
@@ -5281,6 +5281,7 @@ declare type TextInputChangeEvent =
52815281
NativeSyntheticEvent<TextInputChangeEventData>
52825282
declare type TextInputChangeEventData = {
52835283
readonly eventCount: number
5284+
readonly selection?: Selection
52845285
readonly target: number
52855286
readonly text: string
52865287
}
@@ -6193,15 +6194,15 @@ export {
61936194
TaskProvider, // 266dedf2
61946195
Text, // e55ac2e2
61956196
TextContentType, // 239b3ecc
6196-
TextInput, // cf7a3331
6197+
TextInput, // 2e89b91d
61976198
TextInputAndroidProps, // 3f09ce49
6198-
TextInputChangeEvent, // 380cbe93
6199+
TextInputChangeEvent, // 6821f629
61996200
TextInputContentSizeChangeEvent, // 5fba3f54
62006201
TextInputEndEditingEvent, // 8c22fac3
62016202
TextInputFocusEvent, // c36e977c
62026203
TextInputIOSProps, // 0d05a855
62036204
TextInputKeyPressEvent, // 967178c2
6204-
TextInputProps, // a817a7f7
6205+
TextInputProps, // c75f0362
62056206
TextInputSelectionChangeEvent, // a1a7622f
62066207
TextInputSubmitEditingEvent, // 48d903af
62076208
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)