[Dialog] onBackdropClick event fires when draggable item released on it #13648

apo-mcc posted onGitHub

If Dialog contains any draggable component (e.g. sortable list from react-sortable-hoc) and this component have been dragging and has released over 'backdrop zone' then onBackdropClick event fires.

Expected Behavior

If mouse up event happens while dragging an item over 'backdrop zone' then the item should be released without firing onBackdropClick event.

Current Behavior

Releasing draggable component over 'backdrop zone' is firing onBackdropClick event

Steps to Reproduce

Link: https://codesandbox.io/s/km2nmnyn03

Context

Your Environment

Tech	Version
Material-UI	v3.4.0
React	16.5.2
Browser	70.0.3538.102
TypeScript	3.1.4

This happens for any MUI Dialog in chrome and is reproducible on the demo page: https://material-ui.com/demos/dialogs/. Just mouse down on a dialog, move your mouse off and when you mouse up the Dialog will close

posted by joshwooding over 6 years ago

@oliviertassinari looking at bootstrap they seem to handle this using:

$(this._dialog).on(Event.MOUSEDOWN_DISMISS, () => {
      $(this._element).one(Event.MOUSEUP_DISMISS, (event) => {
        if ($(event.target).is(this._element)) {
          this._ignoreBackdropClick = true
        }
      })
    })

posted by joshwooding over 6 years ago

@joshwooding It's a regression introduced between v3.3.0 (OK) and v3.4.0 (KO).

posted by oliviertassinari over 6 years ago

It's related to #13409. I would suggest we remove the handleBackdropClick callback from the Dialog, but instead that we delegate the work to the Modal by following the Bootstrap pointer events strategy: none on the container, auto on the paper. I couldn't spot any side effect try it out.

posted by oliviertassinari over 6 years ago