Modal variant of drawer crashes React over uncaught exception in FocusTrap

Hi! 👋

TL;DR

Using <Drawer modal ... /> causes uncaught exception in <FocusTrap /> upon clicking any button that activates the drawer, which in turn crashes React.

Reproduction repo

• https://github.com/4cm4k1/mdc-react-modal-drawer-troubleshooting

Environment info (just in case)

• macOS v10.14.1
• Node v11
• yarn v1.10.1
• react/react-dom v16.6.0
• next v7.0.2
  • webpack v4.20.2
• @material/react-drawer v0.6.1

Overview

If I am not mistaken, there seems to be a bug in the implementation of focus-trap-react in@material/react-drawer. Activating the modal variant of the drawer causes react to crash and attempt to recreate the component tree unsuccessfully, with the below console output. I have reproduced this both in this example repository and my personal website’s repo in development and production modes.

I have done my best in following the documentation, which currently isn’t the greatest and has several typographical errors in variable/function naming. I’ve also tried troubleshooting this myself, but without much success. Notably, by setting manually focusTrapOptions values all to true, I prevented the crash, but it then results in Chrome killing a call stack that maxes out, which hints at a looping issue. Then, I looked at focus-trap’s docs and found that initialFocus should not be set as a Boolean as it is here.

However, I’m finding the layers of abstraction a little bit hard to follow, so that’s why I’m raising the issue here. I don’t know how to solve this. 😛

I greatly appreciate the team’s assistance here, and I’ve been very excited to see MDC making such big strides on multiple platforms! Thanks!

Error output

Dev mode

Uncaught Error: You can't have a focus-trap without at least one focusable element
    at getInitialFocusNode (VM1105 index.js:214)
    at updateTabbableNodes (VM1105 index.js:222)
    at Object.activate (VM1105 index.js:211)
    at FocusTrap.componentDidMount (VM1105 index.js:906)
    at commitLifeCycles (VM1117 react-dom.development.js:15255)
    at commitAllLifeCycles (VM1117 react-dom.development.js:16523)
    at HTMLUnknownElement.callCallback (VM1117 react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (VM1117 react-dom.development.js:199)
    at invokeGuardedCallback (VM1117 react-dom.development.js:256)
    at commitRoot (VM1117 react-dom.development.js:16677)
    at completeRoot (VM1117 react-dom.development.js:18069)
    at performWorkOnRoot (VM1117 react-dom.development.js:17997)
    at performWork (VM1117 react-dom.development.js:17901)
    at performSyncWork (VM1117 react-dom.development.js:17873)
    at batchedUpdates$1 (VM1117 react-dom.development.js:18108)
    at batchedUpdates (VM1117 react-dom.development.js:2198)
    at dispatchEvent (VM1117 react-dom.development.js:4939)

The above error occurred in the <FocusTrap> component:
    in FocusTrap (created by Drawer)
    in aside (created by Drawer)
    in Drawer (at pages/index.js:20)
    in Home (created by App)
    in Container (created by App)
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.

Prod mode

Error: You can't have a focus-trap without at least one focusable element
    at h (index.js:58)
    at E (index.js:58)
    at Object.activate (index.js:58)
    at t.value (index.js:308)
    at Ia (commons.2a89c77150ec82f381ee.js:22)
    at ja (commons.2a89c77150ec82f381ee.js:22)
    at Oa (commons.2a89c77150ec82f381ee.js:22)
    at Aa (commons.2a89c77150ec82f381ee.js:22)
    at Ue (commons.2a89c77150ec82f381ee.js:22)
    at Nn (commons.2a89c77150ec82f381ee.js:22)

[TroyTae]

Because there is no focusable element. Please read this README.md. (https://github.com/material-components/material-components-web-react/tree/master/packages/drawer#focus-management)

Or in my case I used a empty anchor tag. Write like this:

<TopAppBar
    title="Test"
    navigationIcon={<MaterialIcon icon="menu" onClick={() => this.setState({open: true})}/>}
/>,
<Drawer
    modal
    open={this.state.open}
    onClose={() => this.setState({open: false})}>
    <DrawerHeader>
        <DrawerTitle tag='h1'>Test</DrawerTitle>
        <DrawerSubtitle>test.kr</DrawerSubtitle>
    </DrawerHeader>
    <List singleSelection={true}
             selectedIndex={this.state.selectedIndex}>
        <ListItem>
            <ListItemGraphic graphic={<MaterialIcon icon={icon}/>} />
            <ListItemText primaryText={name} />
         </ListItem>
     </List>
     <a href="#"></a>
</Drawer>,
<TopAppBarFixedAdjust>
    <SomeContents/>
</TopAppBarFixedAdjust>

[4cm4k1]

Hi @TroyTae,

Thank you for pointing out a workaround for this. I’m working on a pull request to make the Drawer and List components work better together, but in the meantime, sticking an <a> in there works fine.

☺️