The dropdown menu doesn't close after select

[truonghungit]

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

[raresherta]

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

[andreamazz]

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]

@ekwonye-richard can i work on it?

[souri84]

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

Thank yo uvery much ! It works nice !!

[maciekgrzela]

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