hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 17:04:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: refocus on show more button

Browse source
This commit is contained in:
MAZE 2024-04-25 19:59:41 +03:30
parent 54c777276d
commit b955fc93f4
1 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/sounds/sounds.tsx
View file

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