From 3ad4a748cd11270409f7c96a11d46a2e7aad6465 Mon Sep 17 00:00:00 2001
From: Eric Giovanola <ericgio@gmail.com>
Date: Thu, 28 Nov 2024 14:07:03 -0800
Subject: [PATCH] Use effect for hint scroll listener

---
 src/components/Hint/Hint.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/Hint/Hint.tsx b/src/components/Hint/Hint.tsx
index 503e2122..bc8a1b61 100644
--- a/src/components/Hint/Hint.tsx
+++ b/src/components/Hint/Hint.tsx
@@ -39,14 +39,23 @@ function copyStyles(inputNode: HTMLInputElement, hintNode: HTMLInputElement) {
 
 export const useHint = () => {
   const { hintText, inputNode } = useTypeaheadContext();
-  
+
   const hintRef = useRef<HTMLInputElement | null>(null);
 
-  // scroll hint input when the text input is scrolling
-  inputNode?.addEventListener("scroll", () => {
-    hintRef.current!.scrollLeft = inputNode?.scrollLeft
-  })
-  
+  useEffect(() => {
+    // Scroll hint input when the text input is scrolling.
+    const handleInputScroll = () => {
+      if (hintRef.current && inputNode) {
+        hintRef.current.scrollLeft = inputNode.scrollLeft;
+      }
+    };
+
+    inputNode?.addEventListener('scroll', handleInputScroll);
+    return () => {
+      inputNode?.removeEventListener('scroll', handleInputScroll);
+    };
+  }, [inputNode]);
+
   useEffect(() => {
     if (inputNode && hintRef.current) {
       copyStyles(inputNode, hintRef.current);