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(null); + useEffect(() => { + if (showAll && clickedMore) { + firstNewSound.current?.focus(); + setClickedMore(false); + } + }, [showAll, clickedMore]); + const showMoreButton = useRef(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);