Material-ui: SwipeableDrawer needs `disableBackdropTransition` even with `hideBackdrop` or `BackdropProps.invisible`

[mikew]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

No errors.

Current Behavior

Getting error:

SwipeableDrawer.js:346 Uncaught TypeError: Cannot read property 'style' of null
    at SwipeableDrawer.setPosition (SwipeableDrawer.js:346)
    at HTMLBodyElement.SwipeableDrawer._this.handleBodyTouchStart (SwipeableDrawer.js:134)

Steps to Reproduce

<SwipeableDrawer BackdropProps={{}} />
<SwipeableDrawer hideBackdrop />

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.1.0 |

[oliviertassinari]

@mikew Thank you for opening this issue, it's a great feedback!

• The hideBackdrop issue can be fixed with:

-    if (!this.props.disableBackdropTransition) {
+    if (!this.props.disableBackdropTransition && !this.props.hideBackdrop) {
      const backdropStyle = this.backdrop.style;

• The BackdropProps issue can be fixed with:

    // variant === temporary
    return (
      <Modal
        BackdropProps={{
+         ...BackdropProps,
          ...BackdropPropsProp,
          transitionDuration,
        }}
        className={classNames(classes.modal, className)}

Do you want to work on it?

[spirosikmd]

Hi @oliviertassinari! I would like to pick this up if it is possible. Let me know!

[oliviertassinari]

@spirosikmd Yes please! :)

[mikew]

Oh I messed up the code in my examples, they're both the same issue I though could be solved with:

if (
!this.props.disableBackdropTransition
|| !this.props.hideBackdrop
|| !(this.props.BackdropProps && this.props.BackdropProps.invisible)
)

[spirosikmd]

Hi @mikew! I updated the docs with the following props as your example suggests

<SwipeableDrawer
  open={this.state.left}
  onClose={this.toggleDrawer('left', false)}
  onOpen={this.toggleDrawer('left', true)}
+ BackdropProps={{}}
+ hideBackdrop>
  <div
    tabIndex={0}
    role="button"
    onClick={this.toggleDrawer('left', false)}
    onKeyDown={this.toggleDrawer('left', false)}
  >
    {sideList}
  </div>
</SwipeableDrawer>

but I don't get any error. I can't reproduce it. Am I missing something?

[spirosikmd]

I found what I was missing. The error happens only on mobile devices. I used the device toolbar on Chrome to simulate an iPhone, so now I can see the error.