using custom components when isMulti and !closeMenuOnSelect click outside do not close menu

Summary

I’m using react-select version 3.1.0. When I use a custom ValueContainer and closeMenuOnSelect={false}, the menu doesn’t close when you click outside the menu.

Details

When I first open the menu and click away, the menu closes. After I select items and click away, the menu doesn’t close. If I then unselect items, the menu still doesn’t close when I click away. I checked out issue 2810 from v2, but I am defining the custom component outside of the render and it doesn’t solve the problem.

Code

const ValueContainer = ({ children, ...props }) => {
  const { getValue, hasValue, isMulti, selectProps: { placeholder } } = props;
  const numberOfValues = getValue().length;
  if (!hasValue || !isMulti) {
    return (
      <components.ValueContainer {...props}>
        {children}
      </components.ValueContainer>
    );
  }
  return (
    <components.ValueContainer {...props}>
      {`${numberOfValues} ${placeholder}`}
    </components.ValueContainer>
  );
};

const Select = (props) => {
  return (
    <span>
      <ReactSelect
        {...props}
        components={{
          ValueContainer
        }}
        closeMenuOnSelect={true}
        isMulti={true}
      />
    </span>
  );
};

[chkal]

I experimented a bit with your sample. Just move your custom components out of the App component. This should fix this issue.

https://codesandbox.io/s/react-codesandboxer-example-forked-m05z9?file=/example.js

Not completely sure why this happens. But if you declare the custom components inside another component, you will get new components on each render, which is most likely a bad idea. 😃

[chkal]

@taylorstyers Thanks a lot for sharing your code.

In the meantime we also fixed the issue by adding {children[1]} as the last child of <components.ValueContainer ...>.

Thanks a lot! 🍻