Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"Can't have a focus-trap without a focusable element" in Drawer

See original GitHub issue

I just upgraded my app to 1.5.3 from the master branch and the only thing that I haven’t gotten to work again is the Drawer component, which raises the following exception: index.js?79b7:169 Uncaught Error: You can't have a focus-trap without at least one focusable element

focus-trap

This also happens when I copy the updated example here: https://github.com/prateekbh/preact-material-components/blob/master/docs/src/routes/drawer/sample.txt

Issue Analytics

State:
Created 5 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

cromefirecommented, Sep 26, 2018

Oh no that’s quite easy, I only need to copy that from TextField but I’m really busy this week

1reaction

prateekbhcommented, Sep 24, 2018

yep sorry we’re in middle of updating the docs, here’s how u can do this: https://github.com/prateekbh/preact-material-components/blob/master/docs/src/components/menu/index.js#L71-L89

Note: One of them has to have selected prop.

P.S.: We know its horrible, thus we’ll take more control of these components in 2.0

Top Results From Across the Web

MDC-Web: Dialog "You can't have a focus-trap without at ...

Focus is trapped inside drawer when modal drawer is opened. This requires at least one focusable element to be present. As suggested above,...

FocusTrap: Element must have at least one focusable child ...

However, when I dispatch action to set isDialogOpen to true, I get the following console error: Uncaught Error: FocusTrap: Element must have at ......

ERROR Error: You can't have a focus-trap without at least ...

ERROR Error : You can't have a focus-trap without at least one focusable element. I got this error in my Angular code for...

there are no focusable elements inside the <FocusTrap />

This error was being thrown when I tried to use the Simpler Alert Modal of TailwindUI. After googling, the ff resources helped me...

Focus-trap NPM

Your trap should include a tabbable element or a focusable container. You can't have a focus trap without focus, so an error will...