[fix] TextInput cursor position with secureTextEntry

On web, the cursor jumps to the start of the input when secureTextEntry is toggled.
Preserve and restore previous selection after secureTextEntry is toggled.

Close #2576

Author: Pedro Guerreiro

packages/react-native-web/src/exports/TextInput/index.js

@@ -193,6 +193,15 @@ const TextInput: React.AbstractComponent<
 
   const dimensions = React.useRef({ height: null, width: null });
   const hostRef = React.useRef(null);
+  const prevSelection = React.useRef(null);
+  const prevSecureTextEntry = React.useRef(false);
+
+  React.useEffect(() => {
+    if (hostRef.current && prevSelection.current) {
+      setSelection(hostRef.current, prevSelection.current);
+    }
+    prevSecureTextEntry.current = secureTextEntry;
+  }, [secureTextEntry]);
 
   const handleContentSizeChange = React.useCallback(
     (hostNode) => {
@@ -324,18 +333,21 @@ 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 { selectionStart, selectionEnd } = e.target;
+      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(() => {