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.

Showing a dialog with no buttons prints an error in console (You can't have a focus-trap without at least one focusable element)

See original GitHub issue

What MDC-Web Version are you using?

0.12.1, served from jsdelivr

What browser(s) is this bug affecting?

Chromium 58.0.3029.81

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36

Firefox Nightly 55.0a1

Mozilla/5.0 (X11; Linux x86_64; rv:55.0) Gecko/20100101 Firefox/55.0

What OS are you using?

Arch Linux x86_64 (last updated May 3rd)

What are the steps to reproduce the bug?

https://codepen.io/anon/pen/PjqLWJ

Opening the page will cause the error in console. The dialog opens fine, otherwise.

What is the expected behavior?

Showing a dialog with no buttons shouldn’t print an error in console.

What is the actual behavior?

Showing a dialog with no buttons prints an error in console.

Any other information you believe would be useful?

#762 seems to have a similar error, though with a different cause.

The error trace from the site I initially experienced the issue with:

material-components-web.js:9692 Uncaught Error: You can't have a focus-trap without at least one focusable element
    at firstFocusNode (material-components-web.js:9692)
    at addListeners (material-components-web.js:9636)
    at Object.activate (material-components-web.js:9581)
    at Object.trapFocusOnSurface (material-components-web.js:1867)
    at MDCDialogFoundation.handleTransitionEnd_ (material-components-web.js:3971)
    at HTMLDivElement.MDCDialogFoundation._this.transitionEndHandler_ (material-components-web.js:3885)

Issue Analytics

State:
Created 6 years ago
Comments:24 (12 by maintainers)

Top GitHub Comments

3reactions

Garbeecommented, Jun 30, 2017

Why are you trying to use a dialog that has no internal trigger to be closed? That’s bad for accessibility and usability. IMO this error is highly informative and is developer error, not an error in the focus trap.

2reactions

faheem-akhtarcommented, Oct 18, 2017

@Garbee see what MD recommend in the Simple Dialog section. “Simple dialogs do not have explicit buttons that accept or cancel an operation.” https://material.io/guidelines/components/dialogs.html#dialogs-simple-menus

Top Results From Across the Web

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

I got this error in my Angular code for opening a material design dialog(MDCDialog), but I have no clue at the first glance....

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 ......

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...

Global Focus Guidelines - Lightning Design System

When focus management is done right, it helps keyboard and screen reader users discover UI changes and easily reach the next logical step...

All other San Diego fixes - Product Documentation | ServiceNow

An error suggestion does not display for the Bookmark title field upon invoking the Done button without entering data in the field.