Dropdown doesn't close when placed inside of Checkbox component

[tuyakhov]

Bug Report

Steps

1. Click on dropdown
2. Click on one of the options

Expected Result

The dropdown menu should close

Actual Result

It remains open until you click on one of the options one more time or click outside of the menu

Version

1.2.0

Testcase

https://codesandbox.io/s/vigorous-ives-l0qwm?file=/example.js

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

[layershifter]

@tuyakhov it seems that it comes from these lines:

https://github.com/Semantic-Org/Semantic-UI-React/blob/bf87dd2c453c4dd2f855233551760eb4c396ef31/src/modules/Dropdown/Dropdown.js#L414-L416

I suggest to check what will happen if these lines will be simply removed. I don't that a comment there is still relevant.

[layershifter]

An ugly workaround to unblock you: https://codesandbox.io/s/wizardly-thompson-w03wb?file=/example.js. Please let us know if works for you

[tuyakhov]

Hi @layershifter , Thanks for the quick reply. I appreciate your help with the workaround. How would recommend removing those lines in an existing project? One way I thought of is to fork -> edit -> change version in package.json, but it seems a bit tedious for just a test.

[layershifter]

How would recommend removing those lines in an existing project? One way I thought of is to fork -> edit -> change version in package.json, but it seems a bit tedious for just a test.

https://www.npmjs.com/package/patch-package should work for you, can you please try?

---

https://github.com/Semantic-Org/Semantic-UI-React/blob/bf87dd2c453c4dd2f855233551760eb4c396ef31/src/modules/Dropdown/Dropdown.js#L453-L454

Actually it seems that these lines are the source of the issue.

[waleedabdeen]

I could help with this one if needed. Here is my initial plan of how to fix this.

const { open } = this.state

if(!open) {
  e.stopPropagation()
}

What do you think?

[marksthespots]

we had the same issue, the workaround did solve it although we ended up just moving things in the design at the end less complexity