material-components-web: MDC-Web: Dialog "You can't have a focus-trap without at least one focusable element"

I’m using <script src="//unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script> w foundation and today am getting an error that I was not getting last week.

material-components-web.min.js:6 Uncaught Error: You can't have a focus-trap without at least one focusable element
    at p (material-components-web.min.js:6)
    at l (material-components-web.min.js:6)
    at Object.n [as activate] (material-components-web.min.js:6)
    at Object.trapFocusOnSurface (material-components-web.min.js:6)
    at e.value (material-components-web.min.js:6)
    at HTMLDivElement.n.transitionEndHandler_ (material-components-web.min.js:6)

Any ideas? I have a <button id="account-cancel" type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel">Cancel</button> in the dialog?..

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

@Download I found a solution to the problem - you must have at least one DrawerItem with the selected attribute

+22

johnhaitas on Nov 27, 2018

For future reference I’m linking a complete example of dismissible drawer on stackblitz.

The reason we made it to have at least one focusable element inside drawer because of accessibility reasons.

At least one focusable element is required to close the drawer using <kbd>ESC</kbd> key when it is opened and focus is inside drawer.
Focus is trapped inside drawer when modal drawer is opened. This requires at least one focusable element to be present.

As suggested above, it is recommended to have at least one drawer item (i.e., mdc-list-item).

@Download Please see this example for use case when none of the drawer items are selected initially. Drawer component itself is not aware which navigation item is currently active, it is also not safe assumption to activate or select first item.

abhiomkar on Dec 20, 2018

@johnhaitas you just saved me hours of strife! ❤️

developit on Dec 13, 2018

@Download @zaguiini The error that you see expected behaviour when drawer is missing list component (which is a focusable element).

So how to do it? I just copied the example…

zaguiini on Nov 22, 2018

Getting this same issue:

index.js?79b7:169 Uncaught Error: You can't have a focus-trap without at least one focusable element
    at getInitialFocusNode (index.js?79b7:169)
    at updateTabbableNodes (index.js?79b7:239)
    at Object.activate (index.js?79b7:40)
    at Object.trapFocus (index.js?254f:167)
    at MDCModalDrawerFoundation.opened (foundation.js?f521:36)
    at MDCModalDrawerFoundation.handleTransitionEnd (foundation.js?cb41:155)
    at HTMLElement.handleTransitionEnd_ (index.js?254f:120)

I get this when I try to close the drawer (from preact-material-components).

@download I can verify that I see the same “You can’t have a focus-trap without at least one focusable element” error with MDCDrawer on preact-material-components

johnhaitas on Nov 27, 2018

Getting this same issue:

index.js?79b7:169 Uncaught Error: You can't have a focus-trap without at least one focusable element
    at getInitialFocusNode (index.js?79b7:169)
    at updateTabbableNodes (index.js?79b7:239)
    at Object.activate (index.js?79b7:40)
    at Object.trapFocus (index.js?254f:167)
    at MDCModalDrawerFoundation.opened (foundation.js?f521:36)
    at MDCModalDrawerFoundation.handleTransitionEnd (foundation.js?cb41:155)
    at HTMLElement.handleTransitionEnd_ (index.js?254f:120)

I get this when I try to close the drawer (from preact-material-components).

Download on Nov 11, 2018

@rhroyston correct! 😃 since 0.12.0 there is a BREAKING CHANGE that states “Dialogs do not require a style=“visibility:hidden” attribute in html”.

If you still face the problem please be more precise as possible so we can help you. Otherwise just close the issue! 🙂

We also have a template on CodePen which we encourage you to use to create a reproduction of the issue.

robzenn92 on Jun 1, 2017