From f466303feffdee7157c2beab9380a31ea5365085 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Fri, 28 Jul 2023 19:01:25 +0100 Subject: [PATCH 1/4] fix(web)[TextInput]: cursor jumps to the start when secureTextEntry is toggled --- .../src/exports/TextInput/index.js | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index eaebb34460..56d8affb7f 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -192,6 +192,13 @@ const TextInput: React.AbstractComponent< const dimensions = React.useRef({ height: null, width: null }); const hostRef = React.useRef(null); + const prevSelection = React.useRef({start: 0, end: 0}); + const prevSecureTextEntry = React.useRef(false); + + React.useEffect(() => { + setSelection(hostRef.current, prevSelection.current); + prevSecureTextEntry.current = secureTextEntry; + }, [secureTextEntry]); const handleContentSizeChange = React.useCallback( (hostNode) => { @@ -323,18 +330,22 @@ const TextInput: React.AbstractComponent< } function handleSelectionChange(e) { - if (onSelectionChange) { - try { - const node = e.target; - const { selectionStart, selectionEnd } = node; - e.nativeEvent.selection = { - start: selectionStart, - end: selectionEnd - }; + try { + const node = e.target; + const { selectionStart, selectionEnd } = node; + const selection = { + start: selectionStart, + end: selectionEnd + }; + if (onSelectionChange) { + e.nativeEvent.selection = selection; e.nativeEvent.text = e.target.value; onSelectionChange(e); - } catch (e) {} - } + } + if (prevSecureTextEntry.current === secureTextEntry) { + prevSelection.current = selection; + } + } catch (e) {} } useLayoutEffect(() => { From 60850ffef7fe3d2bac4eebd8152364d895c70dd1 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro <48553277+pac-guerreiro@users.noreply.github.com> Date: Mon, 31 Jul 2023 12:06:07 +0100 Subject: [PATCH 2/4] refactor: apply code suggestions Co-authored-by: Thiago Brezinski --- packages/react-native-web/src/exports/TextInput/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index 56d8affb7f..8253cc8f23 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -331,8 +331,7 @@ const TextInput: React.AbstractComponent< function handleSelectionChange(e) { try { - const node = e.target; - const { selectionStart, selectionEnd } = node; + const { selectionStart, selectionEnd } = e.target; const selection = { start: selectionStart, end: selectionEnd From 1165bead2c96de7a96b9727b8373599687d94a9b Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Thu, 3 Aug 2023 11:51:32 +0100 Subject: [PATCH 3/4] fix(web)[TextInput]: null ref causing app crash --- packages/react-native-web/src/exports/TextInput/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index 8253cc8f23..9ddf460874 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -192,11 +192,13 @@ const TextInput: React.AbstractComponent< const dimensions = React.useRef({ height: null, width: null }); const hostRef = React.useRef(null); - const prevSelection = React.useRef({start: 0, end: 0}); + const prevSelection = React.useRef({ start: 0, end: 0 }); const prevSecureTextEntry = React.useRef(false); React.useEffect(() => { - setSelection(hostRef.current, prevSelection.current); + if (hostRef.current) { + setSelection(hostRef.current, prevSelection.current); + } prevSecureTextEntry.current = secureTextEntry; }, [secureTextEntry]); From 1659c4d6130a3bd83100cd43a21dd1b5e39175bc Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Fri, 4 Aug 2023 12:13:25 +0100 Subject: [PATCH 4/4] chore[TextInput]: fix broken test --- packages/react-native-web/src/exports/TextInput/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index 9ddf460874..f342f65eb7 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -192,11 +192,11 @@ const TextInput: React.AbstractComponent< const dimensions = React.useRef({ height: null, width: null }); const hostRef = React.useRef(null); - const prevSelection = React.useRef({ start: 0, end: 0 }); + const prevSelection = React.useRef(null); const prevSecureTextEntry = React.useRef(false); React.useEffect(() => { - if (hostRef.current) { + if (hostRef.current && prevSelection.current) { setSelection(hostRef.current, prevSelection.current); } prevSecureTextEntry.current = secureTextEntry;