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

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)

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 24 (12 by maintainers)

Most upvoted comments

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.

Garbee on Jun 30, 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

faheem-akhtar on Oct 18, 2017

So let’s tweak the “Expected Behavior” bit. Instead what we should strive to do is catch the depended upon libraries error and throw one with a better message. Or throw our own error before the focus trap is even called if no focusable node is found. That way the message is more easily understood by developers when they see it in the console and there is a clear action to resolve it.

Garbee on Jun 30, 2017

I got this while testing with an empty dialog before adding a close button, and I would hardly call an unintelligible error about focus traps “highly informative”.

unascribed on Jun 30, 2017

eg dialog with QR code with link, that can be closed on esc or on click

veonua on May 19, 2018