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.

[binoyskumar92]

If value container is not displayed then this issue happens. I suppose that it uses some kind of css or some property from the value container for the close operation when clicked outside.

[ebonow]

Greetings @kulkarnipradnyas,

@binoyskumar92 is correct.

The react-select component relies on the Input remaining focused. When then Input is blurred, then the state is changed and menu closed (if not controlled). Since the Input is inside the ValueContainer, this mechanism essentially breaks.

However, as long as there is another component within the Control that can maintain focus, you can conceivably workaround this. Here is a similar issue working with a custom Control (with no ValueContainer) #4279. If you scroll down a bit to here, you can read my response addressing some of the concerns along with with a solution demonstrating how to open/close the menu without an Input or ValueContainer

demo: codesandbox

Let me know if you have any other questions.

[tania-balto]

This issue should not be closed, it's still relevant. If ValueContainer is set then the dropdown won't close.

[ebonow]

Greetings @tania-balto

If ValueContainer is set then the dropdown won't close.

Can you elaborate or better yet include a codesandbox demonstrating the incorrect behavior?

[tania-balto]

Greetings, @ebonow. Sorry for the curt response. In my case, I used this code to update the value container to display "{x} selected" if more than one item is selected, and show the item itself if only one is selected, which hopefully helps anyone in the future.

const ValueContainer = ({ children, ...props }) => {
  const { length } = props.getValue();
  const selectOptionsAndInput = React.Children.map(children, (child) => {
    if (child && [components.SingleValue].indexOf(child.type) === -1) {
      return child;
    }
    return null;
  });

  const searchInput = last(selectOptionsAndInput);

  if (length > 1) {
    return (
      <components.ValueContainer {...props}>
        <div className="option-label">{`${length} selected`}</div>
        {searchInput}
      </components.ValueContainer>
    );
  }

  return <components.ValueContainer {...props}>{selectOptionsAndInput}</components.ValueContainer>;
};

The dropdown wouldn't close if I clicked outside, but it was because I tried currying and passing a value in at the components={{ ValueContainer }} level. (I was doing components={{ ValueContainer(someVal) }}). So as long as you don't do that and define ValueContainer outside of the component, it should work without an issue. Hopefully this helps someone else who comes along this.

[ebonow]

@tania-balto ,

I'm glad you were able to get this resolved. This isn't an uncommon issue and recently this section was added to the documentation to better help identify this frustrating behavior.
https://react-select.com/components#defining-components

Regarding your solution, have you tried overriding the MultiValue instead of the ValueContainer? There is an index prop that is passed into the MultiValue component which might be helpful and likely would be a cleaner solution.

codesandox demo

const MultiValue = props => {
  // Only interested in rendering one/first multiValue
  if (props.index > 0) return null;
  
  const { length } = props.getValue();
  return (length > 1) 
      ? <div className="option-label">{`${length} selected`}</div>
      :  <components.MultiValue {...props} />
}

The component prop does not seem to appear in the documentation anymore so I'll look into what happened there but likely something lost in translation from Flow to TypeScript.

[tania-balto]

Thanks for the follow up, I'll try that out. I think I tried that approach earlier but it probably wasn't working due to the issue I resolved, so I'll try again.

[andrewpashko]

I got this issue but in another case
I'm creating list of options that consist of groups and options without group
And these groups act like accordeons you can expand and condense them
and when you click on group it's not possible to close dropdown
Any ideas on how to fix this?

[ebonow]

@andrewpashko would you kindly create a new discussion under q&a preferably with a codesandbox link so that someone can help you with your particular implementation.

[ashutoshswaraj]

Greetings, @ebonow. Sorry for the curt response. In my case, I used this code to update the value container to display "{x} selected" if more than one item is selected, and show the item itself if only one is selected, which hopefully helps anyone in the future.

const ValueContainer = ({ children, ...props }) => {
  const { length } = props.getValue();
  const selectOptionsAndInput = React.Children.map(children, (child) => {
    if (child && [components.SingleValue].indexOf(child.type) === -1) {
      return child;
    }
    return null;
  });

  const searchInput = last(selectOptionsAndInput);

  if (length > 1) {
    return (
      <components.ValueContainer {...props}>
        <div className="option-label">{`${length} selected`}</div>
        {searchInput}
      </components.ValueContainer>
    );
  }

  return <components.ValueContainer {...props}>{selectOptionsAndInput}</components.ValueContainer>;
};

The dropdown wouldn't close if I clicked outside, but it was because I tried currying and passing a value in at the components={{ ValueContainer }} level. (I was doing components={{ ValueContainer(someVal) }}). So as long as you don't do that and define ValueContainer outside of the component, it should work without an issue. Hopefully this helps someone else who comes along this.

hey, i am stuck with the same problem, can you tell me what is last keyword you used here " last(selectOptionsAndInput); "

i am also defining the value container outside the component
const ValueContainer = ({ children, getValue, ...props }) => { var length = getValue().length; return ( <components.ValueContainer {...props}> {/* {!props.selectProps.inputValue &&${length} Item${length !== 1 ? "s" : ""} selected} */} {length === 0 ? !props.selectProps.inputValue && Select Options: !props.selectProps.inputValue &&${length} selected`}

    {React.Children.map(children, (child) => {
      return child && (child.type === components.Input ? child : null);
    })}
  </components.ValueContainer>
);

};`