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

Same problem with “react-select”: “3.0.8”

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

same problem with “react-select”: “3.0.8”

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.

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.

Same here, not working on 1.2.1

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

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

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.

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.

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.