React-select: Dropdown doesn't close when I click outside the dropdown

[ghost]

Hi when I show the dropdown menu and then click outside the region of dropdown it doesn't close.
Why?

Here is how I create it

 <Select name="fieldcombo"
               value={this.state.comboFieldValue}
               onChange={this.handleFieldComboChange.bind(this)}
               simpleValue
               openOnClick={false}                    
               clearable={true}
               options={selectData}
                />

[jvega]

I have the same issue apparently the version compiled doesn't match with source code @JedWatson

the event bubble is stopped

[jonathanwmaddison]

I am also having this issue. Are there any stop-gap solutions?

[davidhesson]

It works fine on the website/demo page, but I'm stuck on this too

[davidhesson]

@jvega it seems more related to the fact that the drop down input doesn't gain focus (at least for me) when I click the arrow to reveal the drop down contents. If I click outside of the dropdown and it doesn't have focus, it doesn't auto hide the drop down contents.

On the demo page, if you click the drop down arrow, the selects gain focus automatically, but I don't see anything in the example code causing that to happen manually, so it seems like it's a library feature that isn't working.

edit: okay - it doesn't gain focus because of the event bubble stoppage :)

[angelcustodio]

Same here.
Also, it works properly on a tablet/smartphone. Weird.

[jvega]

if you check the screenshots that I attach above, the compiled version that was distributed trough NPM (21 days ago) it doesn't match with source version, the event.stopPropagation() is outside the if when the dropdown is open

1.2.0 version fix this bug

[ConAntonakos]

Thanks for reporting this. I can confirm after upgrading from 1.1.0 to 1.2.0 that the outside click bug has been resolved.

Edit: I'm still encountering an issue for react-virtualized-selected. Looks like you just need to update the sub-dependency.

[angelcustodio]

I've update the package in my project to the 1.2.1 version and it's still not working :/

[vitorhorta]

Same here, not working on 1.2.1

[jdbdnz]

I had this issue when I applied a display: none style to the div[role="combobox"]. Removing that style fixed the issue. But it reintroduced the issue where that div was messing up the display of other elements. That I fixed with a position: absolute and height: 0.

[arihantR]

I faced the same issue, not able to close the multi select dropdown when I click outside it. It works fine for normal dropdown. Any solution. I have the latest version of react-select installed.

[deniswvieira]

Same problem with "react-select": "3.0.8"

[juliocarneiro]

same problem with "react-select": "3.0.8"

[bladey]

Hi @deniswvieira and @juliocarneiro, I'm unable to replicate this with a multi select dropbox, could you please provide a CodeSandbox with the same options you're using so I can look into this further, and also let me know which browser version you're having trouble with.

I've created one here for my testing - https://codesandbox.io/s/react-select-v3-sandbox-nl4yg

[bladey]

This issue will now be closed due to inactivity. If anyone can reproduce this bug and provide a Codesandbox example, please let me know and the issue will be re-opened.

[kulkarnipradnyas]

IndicatorSeparator: () => null,
DropdownIndicator: DownArrowIndicator,
LoadingIndicator: () => null,
ValueContainer: () => null,
Option: ColumnOption

If such configuration provided, as valueconatiner is null, it will not close your optionbox on outside click.If anyone have solution.Please provide.