Skip to content

Commit c1f5445

Browse files
alanleedevmeta-codesync[bot]
authored andcommitted
Add selection types to TextInput onChange event (#55043)
Summary: Pull Request resolved: #55043 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 fbshipit-source-id: 5b575b5c14d23ee53cb0de74b2703673af82513b
1 parent fbe6a68 commit c1f5445

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<<da31eef1ef6a26b328457cff2dcd3160>>
7+
* @generated SignedSource<<ecbb7c5e2070421bc49b2b819bb05ae1>>
88
*
99
* This file was generated by scripts/js-api/build-types/index.js.
1010
*/
@@ -5304,6 +5304,7 @@ declare type TextInputChangeEvent =
53045304
NativeSyntheticEvent<TextInputChangeEventData>
53055305
declare type TextInputChangeEventData = {
53065306
readonly eventCount: number
5307+
readonly selection?: Selection
53075308
readonly target: number
53085309
readonly text: string
53095310
}
@@ -6218,15 +6219,15 @@ export {
62186219
TaskProvider, // 266dedf2
62196220
Text, // e55ac2e2
62206221
TextContentType, // 239b3ecc
6221-
TextInput, // cf7a3331
6222+
TextInput, // 2e89b91d
62226223
TextInputAndroidProps, // 3f09ce49
6223-
TextInputChangeEvent, // 380cbe93
6224+
TextInputChangeEvent, // 6821f629
62246225
TextInputContentSizeChangeEvent, // 5fba3f54
62256226
TextInputEndEditingEvent, // 8c22fac3
62266227
TextInputFocusEvent, // c36e977c
62276228
TextInputIOSProps, // 0d05a855
62286229
TextInputKeyPressEvent, // 967178c2
6229-
TextInputProps, // a817a7f7
6230+
TextInputProps, // c75f0362
62306231
TextInputSelectionChangeEvent, // a1a7622f
62316232
TextInputSubmitEditingEvent, // 48d903af
62326233
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)