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@1.1.0 crashes when no item is active

See original GitHub issue

Bugs

MdcDrawer (modal variant) without any active item crashes when opened:

https://codepen.io/cmath10/pen/wObyWR

But dismissable variant works fine:

https://codepen.io/cmath10/pen/WmBMwW

Got it in console:

Error: You can’t have a focus-trap without at least one focusable element index.js:198 y index.js:198 b index.js:268 n index.js:72 trapFocus component.ts:147 opened_ foundation.ts:39 handleTransitionEnd foundation.ts:146 handleTransitionEnd_ component.ts:100

What MDC Web Version are you using?

1.1.0

What browser(s) is this bug affecting?

Firefox 66.0.1 Chrome 73.0.3683.86

What OS are you using?

Linux Mint 19.1

What are the steps to reproduce the bug?

Open codepens above.
Open console.
Open drawer.
See behavior.

What is the expected behavior?

No errors in console, no crashes

What is the actual behavior?

App crashed, console has error message

Any other information you believe would be useful?

Possible workaround - adding empty anchor to menu top: <a href="#"></a>

Issue Analytics

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

Top GitHub Comments

1reaction

abhiomkarcommented, Apr 17, 2019

Thanks for spotting it! The list expects at least one item to have tabindex="0". I fixed your example by simply adding tabindex="0" to first list item. See MDCList’s Accessibility section.

Here is the updated codepen that has fix.

1reaction

cmath10commented, Apr 3, 2019

@abhiomkar

This seems to be dup of #762

Please see this comment #762 (comment) for explanation.

I read the comment, and example of dismissible drawer you provided: https://stackblitz.com/edit/mdc-drawer-demo-ytwosc?file=index.html

This still not clear for me. I noticed that drawer in your example has no items with class mdc-list-item--activated or mdc-list-item--selected. I have the same drawer content in my modal drawer, it crashes if no item has class mdc-list-item--activated, if i add it to entry, problem disappears, but i really need menu in my app without already selected item(s). I has mdc-list with items like <a class="mdc-list-item" href="#">...<a>, why these anchors is not focusable, but empty is? aria-selected="true" does not help as well.

Top Results From Across the Web

Resolve Acrobat intermittent crashes on Windows

Solution 4: Launch Acrobat Distiller and check if Acrobat is activated · Press Windows key + R to open the Run command window....

Active Directory Replication Status Tool crashing

Hi, Some recent .Net update broke the app. It crashes right after the splash screen. Application: repl.exe Framework Version: v4.0.30319 Description: The.

Editing resource file crashes Visual Studio

Every time I try to edit any resource file in any UWP project in my solution, Visual Studio crashes and restarts. I've not...

Use Crash Detection on iPhone or Apple Watch to call for help ...

Crash Detection is designed to detect severe car crashes—such as front-impact, side-impact, and rear-end collisions, and rollovers—involving ...

Issue Tracker - Grounded - Obsidian Entertainment

Fixed on Live Slashing weapons are not able to be upgraded after choosing the Spicy, Mint, or Salty path. Patch 0.13.3 Fixes. Fixed...