Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown doesn't close when placed inside of Checkbox component #4036

Open
tuyakhov opened this issue Aug 15, 2020 · 7 comments · May be fixed by #4336
Open

Dropdown doesn't close when placed inside of Checkbox component #4036

tuyakhov opened this issue Aug 15, 2020 · 7 comments · May be fixed by #4336

Comments

@tuyakhov
Copy link

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
Copy link

welcome bot commented Aug 15, 2020

👋 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
Copy link
Member

@tuyakhov it seems that it comes from these lines:

_.invoke(this.props, 'onClick', e, this.props)
// prevent closeOnDocumentClick()
e.stopPropagation()

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
Copy link
Member

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
Copy link
Author

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
Copy link
Member

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?


// prevent toggle() in handleClick()
e.stopPropagation()

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

@waleedabdeen
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants