Rmwc: 5.x: Error "this.foundation.handleScrimClick is not a function" on Drawer

Created on 20 Feb 2019  路  3Comments  路  Source: jamesmfriedman/rmwc

  • What RMWC Version are you using [major.minor.patch]:
    5.1.7

  • Name your build system [Webpack, Rollup...]:
    CRA

  • Describe the bug with as much detail as possible:
    When you click/tap on the "drawer scrim" of a "modal drawer" in Chrome mobile debug it does not close the drawer and throws the following error:

Uncaught TypeError: this.foundation.handleScrimClick is not a function
    at class_1.handleScrimClick (index.js:222)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:265)
    at executeDispatch (react-dom.development.js:571)
    at executeDispatchesInOrder (react-dom.development.js:596)
    at executeDispatchesAndRelease (react-dom.development.js:695)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:704)
    at forEachAccumulated (react-dom.development.js:676)
    at runEventsInBatch (react-dom.development.js:844)
    at runExtractedEventsInBatch (react-dom.development.js:852)
    at handleTopLevel (react-dom.development.js:5030)
    at batchedUpdates$1 (react-dom.development.js:21268)
    at batchedUpdates (react-dom.development.js:2247)
    at dispatchEvent (react-dom.development.js:5110)
    at eval (react-dom.development.js:21325)
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at interactiveUpdates$1 (react-dom.development.js:21324)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5086)
  • What happened, and what was supposed to happen:
    The drawer should close with no error.
enhancement

Most helpful comment

The new Typescript updated from MDC caught this issue in a second so it is no longer possible to break it this way. Will be out in the next update.

All 3 comments

This was caused by accidentally setting dismissible={true} and modal={true} on the drawer when using DrawerAppContent. Setting dismissible={false} fixed this.

Well, I suppose a developer warning or error would be helpful as well

The new Typescript updated from MDC caught this issue in a second so it is no longer possible to break it this way. Will be out in the next update.

Was this page helpful?
0 / 5 - 0 ratings