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

[zmixailz]

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

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[yuritoledo]

Can you reproduce it in a codesandbox?

[zmixailz]

Added examples to Testcase section

[brianespinosa]

@zmixailz I am going to close this issue for housekeeping since we cannot reproduce what you are saying here. When you provide a working testcase with codesandbox or codepen, we can reopen.

[zmixailz]

I added examples. Please reopen this bug.

[brianespinosa]

@zmixailz thanks for the examples.

@layershifter you will probably know if this is a duplicate of a know issue in progress or not.

[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.

[giorgioongithub]

Hello, I have similar problem with a Menu.Item of a Dropdown menu that triggers a Dialog, and when the Dialog close, the DropDown menu get opened again. Your solution of avoid event bubbling up worked for me too. You saved my day :).

[ThiefMaster]

Pressing TAB inside a form field inside a modal causes the same issue. adding stopPropagation event handlers for onKeyPress, onKeyDown and onKeyUp doesn't help.

[layershifter]

Actually, it sounds like another problem because we don't have anything like focus trap that will disallow to move focus outside Modal.

[ThiefMaster]

FWIW, I have multiple fields inside my modal and I'm tabbing from field 1 to field 2 in there. So no focus events leaving the modal. However, your comment gave me the hint I needed for a workaround: stopping propagation of onFocus on the modal works!

[layershifter]

I am going to visit this place and address this problems, but I can't give any ETA 😿

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[MrScX]

The issue still persists. I'm on version 0.88.2, If you have a modal inside of a dropdown. Once the modal is open clicking inside or pressing tabs, spaces will toggle the dropdown instead. This made using spaces inside a textarea impossible.

However, stopping propagation onFocus and onClick fixes the issue. But still, this isn't the expected behaviour by any means.

[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.

[bonellia]

https://user-images.githubusercontent.com/16254153/130943230-8f70addc-02b0-4d8c-a21f-b5fe0f735a82.mp4

This issue indeed still persists. Not necessarily broking the functionality of the app, but definitely unexpected behavior.
I won't be able to provide a sandbox that reproduces the issue atm, but I think it is already posted before.
My use case is basically having a Modal with Dropdown.Item as trigger.
A snippet:

<NewContainerFormModal
    triggerElement={<Dropdown.Item >New PGContainer</Dropdown.Item>}
    header={`Add container to ${props.name}.`}
    hosts={props.hosts}
    clusters={props.clusters}
    dispatch={props.dispatch}
    onClick={(e: any) => e.stopPropagation()}
/>