ModalWrapper closing when dragging cursor out of modal

[briankwlin]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

ModalWrapper closes when letting go of your mouse button outside of the modal, but this is particularly troublesome if you're copying something from inside the modal by holding your mouse down, dragging across the text, and letting go outside of the modal. When you let go outside of the modal, regardless of where the click "originated" from, the modal will close.

When holding my mouse down inside the modal to select text and copy it by dragging my mouse across the screen, when I let go outside of the modal I expect the modal to stay open and my selection to remain there so I have an opportunity to copy the text. Instead, the modal closes as it detects a click outside the modal.

As a fix, I would expect there to be some form of check to ensure the click originated from and ended outside the modal before closing the modal.

This is replicated on Chrome v74.0.3729.169 on Mac OS X.

Carbon versions:
[email protected]
[email protected]

Steps to reproduce the issue

1. Open a ModalWrapper component (React) in your browser
2. Select some text inside the modal by holding down your left-click button and dragging your mouse across the screen such that your cursor is now outside the modal, to mimic a user copying some text
3. Let go of your mouse button outside of the modal
4. Modal now closes instead of the expected behaviour of staying open

This behaviour can be seen in the ModalWrapper sample on react.carbondesignsystem.com.

[dakahn]

Thanks for submitting. I can't reproduce what you're talking about with the given example. Here's what I did to repro; let me know if I'm missing something.

1. click launch modal button
2. highlight "Modal" l to M dragging cursor out of bounds of Modal
3. release click outside modals bounds
4. observe modal remains open with "Modal" highlighted for copying

[briankwlin]

@dakahn Assuming that you let go of the click in the overlay affected by opacity (and not over the navbar to the left that isn't in the overlay), then yes it looks right to me, except the result in 4 is that the modal closes. As long as a click originates from inside the modal and ends outside of the modal (while within the overlay) the modal closes.

[tomfletch]

I'm hitting this same issue with ComposedModal. It looks like the fix was only for Modal? Please could we get a fix for ComposedModal too?

[dakahn]

ill open a ticket for porting over the fixes from modal. Thanks for bringing this to our attention @ThomasMatthewFletcher