Focus flickity on mount

[howells]

Wonder if you could help me out with something - I need to focus flickity on mount (so keyboard nav can be use right away) as per https://codepen.io/desandro/pen/JoemRR but I'm struggling.

const flickity = useRef(null);

useEffect(() => {
    if (flickity.current) flickity.current.element.focus();
  }, [flickity.current]);

<Flickity
    className="EntryHeroSlideshow__cells"
    options={flickityOptions}
    flickityRef={c => (flickity.current = c)}
    static
>
    [...]
</Flickity>

On page load, document.activeElement is the body element.

Any ideas where I'm going wrong?

[nullhook]

Are you using NextJS?

[howells]

@nullhook yes... what do you reckon is up? SSR issue?

[nullhook]

It should work if you remove the static prop from the Flickty component.

When you add static prop, it renders the children inside Portal.

P.S - If you want to keep the static prop, delay the focus, it should work. However, I feel adding a setTimeout feels hacky.

[howells]

@nullhook strange one - I had already removed static but it made no difference, but now I've added in a setTimeout it works: hacky but I can't get it to work any other way. Thanks for the suggestion.

[nullhook]

Do you have reloadOnUpdate prop as true?

[howells]

No, these are my props:

<Flickity
            className="EntryHeroSlideshow__cells"
            options={flickityOptions}
            disableImagesLoaded
            flickityRef={c => (flickity.current = c)}
          >

and flickityOptions:

 const flickityOptions = {
    setGallerySize: false,
    prevNextButtons: false,
    lazyLoad: 2,
    pageDots: false,
    autoPlay: duration,
    wrapAround: true,
    pauseAutoPlayOnHover: false,
  };

[nullhook]

Try removing the disableImagesLoaded prop and see if it works.

Are you using that prop for something?

[nullhook]

Nvm, removing static prop raises other issues such as routing to dynamic pages in NextJS.