search

ndimatteo / HULL

💀 Headless Shopify Starter – powered by Next.js + Sanity.io
https://hull.dev
MIT License
1.38k stars 173 forks source link

Your focus-trap must have at least one container with at least one tabbable node in it at all times #88

Closed geniti closed 2 years ago

geniti commented 2 years ago

This happens a lot not sure how to solve

ndimatteo commented 2 years ago

Hey there @geniti !

This can happen if there isn't a link/button within the <FocusTrap /> component and there is animations happening that could cause it to not be focusable when the focus trap component mounts.

There's a few solutions here:

  1. Default the FocusTrap's active prop to false until the animation is complete
  2. Set a fallbackFocus ref via the focusTrapOptions prop

I hope that helps, but let me know if you run into any specific issues with the core HULL components using FocusTrap!

ndimatteo commented 2 years ago

Closing this, but holler if you have any more issues with this @geniti

ullas1000 commented 1 year ago

this is due to none availability of tabbable controls. https://devphobia.com/posts/Your-focus-trap-must-have-at-least-one-container