From fc5e69e06b77ce55f609ee2ccc4563edbd83b894 Mon Sep 17 00:00:00 2001 From: Alan Lee Date: Tue, 7 May 2024 13:15:55 -0700 Subject: [PATCH] TextInput - `selection` prop is not set on component creation (#44398) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/44398 **Problem:** `selection` prop is not being set on component creation. Not quite sure which RN version this issue was introduced but fixing it on latest code. Use playground for testing (refer to following diff) **Proposed Solution:** Added notes in comments but `viewCommands.setTextAndSelection()` is called only on text or selection update which relies on comparing data with `lastNativeSelection`. Problem is that `lastNativeSelection` is initially set to the props value that is passed in so does not send the command on component creation. So assign a default selection value of `{start: -1, end: -1}` so it can be set on component creation. **Changelog:** [General][Fixed] - `selection` prop in `TextInput` was not being applied at component creation Reviewed By: cipolleschi Differential Revision: D56911712 fbshipit-source-id: 7774b246383f85216536040688b0a8ea85b3478a --- .../Libraries/Components/TextInput/TextInput.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js index 7b522fe5dcb..bbbd228a1f4 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.js +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.js @@ -1135,12 +1135,14 @@ function InternalTextInput(props: Props): React.Node { }; const [mostRecentEventCount, setMostRecentEventCount] = useState(0); - const [lastNativeText, setLastNativeText] = useState(props.value); const [lastNativeSelectionState, setLastNativeSelection] = useState<{| - selection: ?Selection, + selection: Selection, mostRecentEventCount: number, - |}>({selection, mostRecentEventCount}); + |}>({ + selection: {start: -1, end: -1}, + mostRecentEventCount: mostRecentEventCount, + }); const lastNativeSelection = lastNativeSelectionState.selection;