Package

@carbon/react

Browser

Chrome

Package version

v11.71.0

React version

v18.2.0

Description

When using ComposedModal to implement custom modal dialogs, if the user presses left mouse button inside modal window, drags the cursor outside the modal to the background layer, and then releases mouse button, the modal closes.

Reproduction/example

https://stackblitz.com/edit/github-znrzua?file=src%2FApp.jsx

Steps to reproduce

Open a link to Stackblitz example on Google Chrome or a Chrome-like browser; make the preview window wider, so modal is not filling the entire window. Then click inside modal body, and while not releasing the mouse button, drag the cursor away from modal window to background layer, and then release the mouse button. Modal window will close, which is not the expected behavior for the user.

On Firefox, this does not reproduce. The problem may be that on Chrome an event.target element for onClick event is the element that was under the cursor when the mouse button was released, instead of the element, on which the user held the mouse button initially.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems