Modal and DropZone are not working nicely

[joosttk]

Environment Information

• Package version(s): @fluentui/react 7.119

Please provide a reproduction of the bug in a codepen:

https://codesandbox.io/s/stoic-tree-53guu?file=/src/app.js

Actual behavior:

When adding a DropZone to a Modal component, it does not trigger the "onDrop" callback function. Having the same DropZone component in the main App component (i.e. not in a Modal), works as expected (it triggers the onDrop).

Expected behavior:

Behaviour of a DropZone in a Modal component should be the same as a DropZone that is not in a model (i.e. it should trigger the onDrop callback).

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Normal

[Kesshi]

You have to enable event bubbling to make it work. Like this in your example:
<Modal isOpen={isOpen} onDismiss={() => setIsOpen(false)} layerProps={{ eventBubblingEnabled: true }}>

[joosttk]

You have to enable event bubbling to make it work. Like this in your example: <Modal isOpen={isOpen} onDismiss={() => setIsOpen(false)} layerProps={{ eventBubblingEnabled: true }}>

Awesome! That fixed it :)

[paulgildea]

Thanks for the help @Kesshi!

@jdhuntington - maybe we should add this to Stack Overflow so that more folks know about it in the short term.