[Bug]:Unintended ListBox onClick behavior component when inside Modal

[davidmenendez]

Package

@carbon/react

Browser

Chrome

Package version

1.60.2

React version

18

Description

This behavior was noticed when clicking on the label of a Dropdown component inside the MultiAddSelect component in the carbon for ibm products library. The associated issue can be found here.

After some investigation I tracked the behavior down to the Modal component. You'll notice that Dropdown doesn't suffer this strange behavior when outside the context of a modal, which you can see in storybook. However, when you do the same to a dropdown inside of a modal you'll see a slightly different behavior. You can see this behavior directly in storybook by clicking on the label of either the dropdown or multiselect and holding down.

This behavior was introduced when stopPropagation() was added to the handleMousedown handlers in Modal and ComposedModal. After testing and debugging locally the problem can be fixed by switching from onMouseDown to onClick. I'm not an expert on the differences between onMouseDown vs onClick but from what I understand because onMouseDown fires first the stopPropagation inclusion may have started to disrupt the event handling within Modal. I tested this by removing stopPropagation in the handler and leaving it as onMouseDown. When including stopPropagation it appears as though onClick is needed instead to avoid this behavior.

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-modal--with-scrolling-content

Steps to reproduce

Scroll down inside the modal until you reach either the MultiSelect or Dropdown components. Click the label once to open the content. Once open, click and hold down on the label. The component should be in a closed state until you release the cursor, which is not the intended / expected behavior.

Suggested Severity

Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.

Application/PAL

c4p

Code of Conduct

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