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

The dropdown menu doesn't close after select #126

Open
truonghungit opened this issue Dec 17, 2021 · 5 comments
Open

The dropdown menu doesn't close after select #126

truonghungit opened this issue Dec 17, 2021 · 5 comments

Comments

@truonghungit
Copy link

Descriptions

I try to use the react-flags-select on reactstrap modal
The dropdown menu doesn't auto-close after selecting the item/clicking outside

@truonghungit truonghungit changed the title The dropdown menu don't close after select The dropdown menu doesn't close after select Dec 17, 2021
@raresherta
Copy link

Hei @truonghungit I have the same issue, did you manage somehow to solve this ?

@andreamazz
Copy link

andreamazz commented Aug 2, 2022

I'm having the same issue, I noticed that it only happens when the control is mounted inside a label tag.

<label>
  <span>Country</span>
  <ReactFlagsSelect
    selected={selected}
    onSelect={(code) => setSelected(code)}
  />
</label>

It looks like that in this case when you click on an item, two click events are triggered, one in the list item and one in the button (even if it's nowhere near the mouse target). This triggers the correct setIsDropdownOpen(false) but right after the button click handler toggles it opened again. I reckon this happens since the default behaviour when clicking a label is to forward the click to its children.
One workaround I found is to prevent the default handler:

<label onClick={e => e.preventDefault()}>
  <span>Country</span>
  <ReactFlagsSelect
    selected={selected}
    onSelect={(code) => setSelected(code)}
  />
</label>

@DaywisonSilva
Copy link

@ekwonye-richard can i work on it?

@souri84
Copy link

souri84 commented Apr 14, 2023

<label onClick={e => e.preventDefault()}>

Thank yo uvery much ! It works nice !!

@maciekgrzela
Copy link

maciekgrzela commented Sep 21, 2023

In my case preventDefault() does nothing :(
But: <label onClick={e => e.stopPropagation()}
completely solves the issue :)

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

No branches or pull requests

6 participants