Fluentui: React DND Drag and Drop Touch Events not working inside Dialog and Modal components

[jyothsnag29]

Environment Information

• Package version(s): (7.97.1)
• Browser and OS versions: (Touch supported devices)

https://codesandbox.io/s/reactdndmultibackendcolordrop-127yh

Use case about the mentioned repository

If we drag the red/green/blue color box and drop it to the gray box we get an alert about which color has dropped. Open Pop up link opens the Dialog component having same drag and drop logic. Open
Model link open the Modal component having same drag and drop logic.

Actual behavior:

I was using React dnd-multi-backend to make it work for both touch and mouse events. But unfortunately Drag and Drop Touch events are not working inside Dialog or Modal window even after setting the eventBubblingEnabled to true. However It works in normal screen.
Mouse events work in all scenarios.
Earlier I have reported this issue #11264, but this has been fixed for the old Edge browser alone and the ticket has been closed. As it became high priority requirement for us to make it work in all browsers I am opening a new ticket. Could you please provide the fix for Chrome and Edge Chromium browsers.

Expected behavior:

When we try to do the color drag and drop from normal screen or inside the Dialog or inside Modal window it should work for both Mouse events and Touch events

Priorities and help requested:

Requested priority: (High)

[aneeshack4]

@jyothsnag29 Thanks for reaching out to us! I'm able to repro this on Chrome but not on Edge. I see that you're passing in eventBubblingEnabled as part of the layer props in both Modal and Dialog in your codesandbox. Besides this, the other solution I'm aware of is what component owner @JasonGore suggested in this comment: https://github.com/OfficeDev/office-ui-fabric-react/issues/11264#issuecomment-569065254 but we already implemented this and merged that PR (which is what fixed it for Edge). I'm not sure what else we can do here... As Jason mentioned, there is an open issue on facebook's react repo addressing this controversial event bubbling problems: https://github.com/facebook/react/issues/11387. I'm not aware of anything else we can do inside the Fabric components - correct me if I'm wrong @JasonGore

[JasonGore]

@aneeshack4 Per your comment I thought that #11571 resolved this issue for multiple browsers, including Chrome. If it's not working in Chrome now and it did before, we should isolate the differences to find root cause. Did it work immediately after #11571? Has it regressed since? etc.

There shouldn't be anything about #11571 that should be browser-specific, so I think it'd be good to matrix behaviors before and after the change and be certain about what is and isn't working to triage this issue properly. Thanks!

[aneeshack4]

As far as I can tell, #11571 fixed this problem for Edge but not for Chrome (and I can see it repros on Safari on mobile too after testing @sortegamartin's codesandbox... will keep investigating

^doesn't repro on Edge on Surface book using the touch screen

[jyothsnag29]

@aneeshack4 any progress on this?

[Kingwl]

Up. Any progress? Happy for work on this one.

[villasante]

any progress on this?