From b955fc93f42c1bd71d5fb5ff46f9e3a039c7fe83 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Thu, 25 Apr 2024 19:59:41 +0330
Subject: [PATCH] fix: refocus on show more button

---
 src/components/sounds/sounds.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/sounds/sounds.tsx b/src/components/sounds/sounds.tsx
index 2263211..0325e6a 100644
--- a/src/components/sounds/sounds.tsx
+++ b/src/components/sounds/sounds.tsx
@@ -21,6 +21,9 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
 
   const firstNewSound = useRef<HTMLDivElement>(null);
 
+  const showMoreButton = useRef<HTMLButtonElement>(null);
+  const [exitComplete, setExitComplete] = useState(false);
+
   useEffect(() => {
     if (showAll) {
       firstNewSound.current?.focus();
@@ -75,12 +78,17 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
       </div>
 
       {sounds.length > 6 && (
-        <AnimatePresence initial={false} mode="wait">
+        <AnimatePresence
+          initial={false}
+          mode="wait"
+          onExitComplete={() => setExitComplete(true)}
+        >
           <motion.button
             animate="show"
             exit="hidden"
             initial="hidden"
             key={showAll ? `${id}-show-less` : `${id}-show-more`}
+            ref={showMoreButton}
             transition={{ duration: 0.2 }}
             variants={variants}
             className={cn(
@@ -88,6 +96,12 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
               hasHiddenSelection && !showAll && styles.active,
             )}
             onClick={() => setShowAll(prev => !prev)}
+            onAnimationComplete={() => {
+              if (!showAll && exitComplete) {
+                setExitComplete(false);
+                showMoreButton.current?.focus();
+              }
+            }}
           >
             {showAll ? 'Show Less' : 'Show More'}
           </motion.button>