Material-components-web: [MDCDrawer] Modal Drawer breaks after opening

[Its-treason]

Bug report

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

Steps to reproduce

1. Copy this Codepen in a html document and open it. The Drawer HTML Code is from the Example found here

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

[GoldenSlam]

I thought I was going crazy - this is happening to me after upgrading to 5.0.0 as well.

Uncaught Error: FocusTrap: Element must have at least one focusable child.
at r.trapFocus (material-components-web-5.0.0.min.js:1)
at Object.trapFocus (material-components-web-5.0.0.min.js:1)
at c.opened_ (material-components-web-5.0.0.min.js:1)
at c.l.handleTransitionEnd (material-components-web-5.0.0.min.js:1)
at HTMLElement.handleTransitionEnd_ (material-components-web-5.0.0.min.js:1)

I'm using Chrome version 78.0.3904.87 on Windows 10

[Darhakexge]

That happens because the nav does not have a tabindex.

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

[GoldenSlam]

That happens because the nav does not have a tabindex.

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

Thanks for this tip - I added tabindex="0" to the first anchor child element of <nav class="mdc-list"> and that resolved the issue. If a tabindex is required for this to work, it should probably get included in the sample code and demos for the Drawer component.

[patrickrodee]

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

[abelcallejo]

I thought I was going crazy - this is happening to me after upgrading to 5.0.0 as well.

@GoldenSlam It is the very same reaction that I got after checking a website of mine.

In my case, I was using the "auto-latest" feature of UNPKG when this happened. Just like as it was suggested in the Getting Started page of Material Components.

I've tried two (2) solutions for this issue and either one of them works.

Solution A

Just like what @Darhakexge suggested

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

The tabindex="0" should solve the issue like so:

<nav class="mdc-list">
    <a href="/" class="mdc-list-item mdc-list-item--activated" aria-current="page" tabindex="0">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
        <span class="mdc-list-item__text">Home</span>
    </a>
    ...
</nav>

Solution B

Instead of always loading the latest version of Material Components libraries like so:

<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

Select a target version that you think are more stable for your implementation. You could revert to the older version (4.0.0) like so:

<link href="https://unpkg.com/[email protected]/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>

I ended up implementing both solutions though.