Dropdown: opens / closes when I click inside of the modal

Bug Report

Steps

1. Create Dropdown and Modal components. Put Dropdown.Item as trigger into Modal.
2. Add Modal to Dropdown as children.
3. Open Modal and click inside it several times.

Expected Result

The state of dropdown does not change.

Actual Result

Dropdown opens / closes when I click inside of the modal.

Version

0.82.5.This worked in version 0.81.3

Testcase

Version 0.81.3: https://codesandbox.io/s/vy884pkzk0 Version 0.82.5: https://codesandbox.io/s/v0225n2r20

[pcorey]

I’m having the same issue with a Confirm within a Menu.Item after upgrading to semantic-ui-react 0.84.0 from 0.78.2.

Triggering the confirm by clicking on the menu items opens the confirm and hides the menu. Clicking within the confirm opens the menu dropdown again.

I had a hunch that click events from the confirm were bubbling up to the Menu.Item, so I added an onClick to my Confirm that stops event propagation:

<Confirm
  ...
  onClick={e => e.stopPropagation();} />

That fixes the issue for me, but I’d rather not have to sprinkle these click handles throughout my Confirm modals, if I don’t have to.

[Jonathanwam]

I am also getting this issue. Version is 0.88.2 as well.

Codesandbox: https://codesandbox.io/s/semantic-ui-react-5j0io

Repro steps:

• Click Actions Dropdown, then click Open Modal
• Click inside text input, but only once
• Press Space several times.

You will notice that it is not interacting with the TextArea but instead with the Dropdown behind the modal.

Sometimes if you click multiple times in the TextArea, the issue will stop and pressing Space will interact with the TextArea correctly.

Adding this to the TextArea is a temporary fix.

onClick={e => e.stopPropagation()}
onFocus={e => e.stopPropagation()}

Edit: My team also found that this stopPropagation doesn’t completely eliminate the bug. If the modal has other elements, such as a dropdown, another text field, button, etc., and the user interacts with any of them, the text area will have this bug again if going back to the text area.

All elements in the modal will likely need the same stopPropagation lines to avoid this behavior.