Skip to content

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

Open
@tuyakhov

Description

@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

Activity

welcome

welcome commented on Aug 15, 2020

@welcome

👋 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

layershifter commented on Aug 17, 2020

@layershifter
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

layershifter commented on Aug 17, 2020

@layershifter
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

tuyakhov commented on Aug 17, 2020

@tuyakhov
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

layershifter commented on Aug 17, 2020

@layershifter
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

waleedabdeen commented on Oct 7, 2020

@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

marksthespots commented on Feb 16, 2021

@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

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @tuyakhov@layershifter@waleedabdeen@marksthespots

      Issue actions

        Dropdown doesn't close when placed inside of Checkbox component · Issue #4036 · Semantic-Org/Semantic-UI-React