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

[jyothsnag29]

Environment Information

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

Please provide a reproduction of the bug in a codepen:

https://github.com/jyothsnag29/ReactDnDMultiBackEndDialog

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.

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

[aneeshack4]

Hi @jyothsnag29, would you mind reproing this in a codepen and linking that? I see that you linked your repo but getting a repo in a sandbox environment like a codepen or on our docs site with one of our examples would help us investigate this further.

[jyothsnag29]

I couldn't find the react-dnd-multi-backend in codepen environment, so created in codesandbox. Hope it helps you to investigate it further.
https://codesandbox.io/s/reactdndmultibackendcolordrop-5216c

[aneeshack4]

@jyothsnag29 Thanks for providing this sandbox - they drag & drop is working for me in the modal & the dialog just as it outside on the page. I get this console output in all 3 areas when I'm on the browser on a non-touch device like my Mac but I see that it doesn't work on my iPhone but it looks like TouchEvents are handled just like MouseEvents in the onDrag in Modal.base.tsx so I'm not sure what the problem is here. @JasonGore, any ideas?
.

[jyothsnag29]

Thank you for verifying the sandbox.
As already mentioned in the ticket its working perfectly fine for mouse events and the problem noticed was with Touch events. Like iPhone, you can even notice the issue in Touch enabled laptops like Surface Pro.

[JasonGore]

It's possible that touch events need to be added here and / or here. If you've reproed the issue lets triage this as a bug for now.

[mrphannguyen]

Hi @jyothsnag29 @aneeshack4

I have the same issue with react-dnd and Panel of Office Fabric, I have just upgraded to office-ui-fabric-react v7.76.0 for fixing the bug: touch on body of panel (https://github.com/OfficeDev/office-ui-fabric-react/pull/11339) but get the issue with drag/drop.

The drag/drop with react-dnd work fine with v.6.55.0

Could you pls help to check.

[aneeshack4]

@JasonGore Is it possible that this actually a regression? Since it worked fine in previous versions.

[JasonGore]

We switched to using React Portals in v7.x which has known and controversial event bubbling behavior. The links I provided above are workarounds for this behavior. I think the fix I mentioned above is pretty easy, it just needs some testing.

[msft-github-bot]

:tada:This issue was addressed in #11571, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[jyothsnag29]

Hi @aneeshack4
I have upgraded my sandbox office ui fabric react version to 7.77.0 and I still see the drag and drop not working with touch https://codesandbox.io/s/reactdndmultibackendcolordrop-5216c . Could you please suggest If I need to modify something. Even the branch you created not working for me(https://codesandbox.io/s/reactdndmultibackendcolordrop-6eel1)
Thank You

[aneeshack4]

@jyothsnag29 which device and OS and browser (and versions for all these) are you reproing this on? Because I tested it with touch on surface book and edge/chrome and they were fine with the new change.

[MRuimerman]

I tested it for @jyothsnag29 because I have a touch device.
I have Windows 10 (1809) on a Surface laptop. I tested in on Chrome (Version 79.0.3945.88 (Official Build) (64-bit).
Drag and drop works on a normal page but inside a dialog or modal screen nothing happens. When I touch the box with my finger, nothing happens. No errors in developer tools.

[aneeshack4]

Hmm I'm not reproing this on Edge with Surface. Chrome for some reason isn't running on my Surface Book even after I re-installed it - @jdhuntington would you mind testing out https://codesandbox.io/s/reactdndmultibackendcolordrop-6eel1 on Chrome - Surface scenario for a repro?

[jyothsnag29]

Thank you @aneeshack4 for verifying.
We are not able to reproduce in Edge but for some reason its not working in Chrome and Edge Chromium. Could we re-open this issue as its not fully working in all browsers.

[jyothsnag29]

@aneeshack4 Do you have any update for me about this issue! We need this scenario to work for Chrome and Edge Chromium browsers.

[sortegamartin]

@aneeshack4 @micahgodbolt Hi, I'm also having the same problem using a drag and drog component inside a panel. On desktop it works correctly but on mobile it doesn't work. I leave the example in codesanbox and a gif of the problem:

https://codesandbox.io/s/sharp-glade-9v9be

[aneeshack4]

Sorry didn't see this til just now @jyothsnag29 will respond on the new issue you created (I think Github send me notifications on this one for some reason) @sortegamartin have you tried passing the eventBubblingEnabled prop? It should definitely work on Panel as is explained here https://github.com/OfficeDev/office-ui-fabric-react/issues/11599#issuecomment-570681054

[JasonGore]

Please note the CodePen @sortegamartin provided is using Fabric 6.x. We shouldn't have disparities in behavior between desktop and mobile with versions of Fabric after the merge of #11571. If we do, we should investigate them.

[sortegamartin]

@aneeshack4 @JasonGore I have changed the version of office ui fabric react to the last one (7.98.0) and it still doesn't work on mobile.
I am also using the layerProps = {{eventBubblingEnabled: true}} property in the panel.

You can test it in this codesandbox

[aneeshack4]

@sortegamartin I see that it repros on safari and chrome on iOS with your codesandbox - this is the same issues as #12081 so I'll update that with investigation progress - please check there