chore(input): add improved tracking while focused

guilhermerodz · Feb 21, 2024 · 7afe406 · 7afe406
1 parent 2217693
commit 7afe406
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/src/input.tsx b/src/input.tsx
@@ -134,6 +134,24 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(
       }
     }, [maxLength, onComplete, value])
 
+    // Run improved selection tracking while focused
+    React.useEffect(() => {
+      if (!isFocused) {
+        return
+      }
+
+      const interval = setInterval(() => {
+        if (inputRef.current && document.activeElement === inputRef.current) {
+          setMirrorSelectionStart(inputRef.current.selectionStart)
+          setMirrorSelectionEnd(inputRef.current.selectionEnd)
+        }
+      }, 5_0)
+
+      return () => {
+        clearInterval(interval)
+      }
+    }, [isFocused, mirrorSelectionStart, mirrorSelectionEnd])
+
     /** Event handlers */
     function _selectListener() {
       if (!inputRef.current) {