From 3b0c22968e4209fa5a37a88b69f55492615ec389 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Thu, 25 Apr 2024 23:48:27 +0330
Subject: [PATCH] fix: remove auto focus on load

---
 src/components/sounds/sounds.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/sounds/sounds.tsx b/src/components/sounds/sounds.tsx
index 0325e6a..8e99751 100644
--- a/src/components/sounds/sounds.tsx
+++ b/src/components/sounds/sounds.tsx
@@ -18,18 +18,20 @@ interface SoundsProps {
 
 export function Sounds({ functional, id, sounds }: SoundsProps) {
   const [showAll, setShowAll] = useLocalStorage(`${id}-show-more`, false);
+  const [clickedMore, setClickedMore] = useState(false);
 
   const firstNewSound = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (showAll && clickedMore) {
+      firstNewSound.current?.focus();
+      setClickedMore(false);
+    }
+  }, [showAll, clickedMore]);
+
   const showMoreButton = useRef<HTMLButtonElement>(null);
   const [exitComplete, setExitComplete] = useState(false);
 
-  useEffect(() => {
-    if (showAll) {
-      firstNewSound.current?.focus();
-    }
-  }, [showAll]);
-
   const [hiddenSelections, setHiddenSelections] = useState<{
     [key: string]: boolean;
   }>({});
@@ -54,6 +56,11 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
     }));
   }, []);
 
+  const toggleMore = () => {
+    setShowAll(prev => !prev);
+    setClickedMore(true);
+  };
+
   const variants = mix(fade(), scale(0.9));
 
   return (
@@ -95,7 +102,7 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
               styles.button,
               hasHiddenSelection && !showAll && styles.active,
             )}
-            onClick={() => setShowAll(prev => !prev)}
+            onClick={toggleMore}
             onAnimationComplete={() => {
               if (!showAll && exitComplete) {
                 setExitComplete(false);