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.

[MDCDrawer] Modal Drawer breaks after opening

See original GitHub issue

Bug report

After opening the drawer the followling Error occurs: “FocusTrap: Element must have at least one focusable child”

Steps to reproduce

Copy this Codepen in a html document and open it. The Drawer HTML Code is from the Example found here
Click on the button which has an onclick attribute. The Drawer should open now and in the Console you should see a Error.

Expected behavior

The drawer should Close when clicking on the scrim or typing drawer.open = false in the console

Actual behavior

Nothing, the drawer will not Close anymore

Your Environment:

Software	Version(s)
MDC Web	Version: 5.0.0 this
Browser	Firefox v72, Chrome v80.0.3987.87
Operating System	Ubuntu 18.04 (64bit) with following Desktop envirements i3-gaps, Mate and Gnome

Additional context

This first happened to me in mdc Web version 5.0.0, version 4.0.0 works fine

Possible solution

Update Documentation if the Modal Drawer HTML Code changed.

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:5 (1 by maintainers)

Top GitHub Comments

15reactions

Darhakexgecommented, Feb 14, 2020

That happens because the nav does not have a tabindex.

Just add tabindex="0" to the first item of the nav

4reactions

patrickrodeecommented, Feb 14, 2020

Let’s add tabindex="0" to the first list item in nav drawer readme.

Top Results From Across the Web

Persistent drawers in Material Components - Stack Overflow

Basically what you want to do is to attach the draw to your draw html, then on a button click, trigger the draw...

@rmwc/drawer | Yarn - Package Manager

Callback that fires when the Drawer is closed. onOpen, undefined | (evt: DrawerOnCloseEventT) => void, Callback that fires when the Drawer is opened....

Navigation Drawer and Composable Scaffold - Brian Gardner

Running the app and opening the drawer showed the first issue. ... for the modal drawer that recommends it be drawn on top...

React Material Web Components | Drawers - RMWC

DrawerAppContent is an optional component that will resize content when the dismissible drawer is open and closed. It must be placed directly after...

Navigation drawers - Vuetify.js

A clipped drawer rests under the application toolbar ... Disables opening of navigation drawer when route changes ... mobile-break-point. Default.