Async multiselect component list not closing when clicking outside of the component

[jordanshardy]

Hi.

I am trying to fix a bug on my website; when I select multiple users from the async select component I am not able to close the component by selecting elsewhere on the page. The only way to close to the component is by selecting itself, otherwise, the dropdown stays open.

See example here

It's difficult to share the code as this is a complex app. However it will help to know that I am defining a custom Async component with these props:

<SelectAsync
  disabled={choice === CHOICES.broadcast}
  loadOptions={onLoadUsers}
  additional={{ page: 1 }}
  multiselect={true}
  closeOnSelect={false}
  onChange={handleChangeSelect}
  placeholder="Select contact(s) ..."
  inputPrefix="To:"
  value={selected}
/>

I know it will be hard to debug without the source code, but any ideas as to why the component is staying open that would be great.

Thanks

[Rall3n]

Hello @jordanshardy,

having no clear example makes it indeed hard to debug your issue.

Would you be so kind and provide the version of react-select you are using?
Are you using custom components replacing the builtin ones (using the components prop)?

I would still ask you to provide a minimal reproducible example using CodeSandbox.

[funnel-mark]

Facing the same issue with the non-async version. To reproduce you need:

• closeMenuOnSelect false
• controlled value with onChange and value
• ValueContainer overridden

Here's a sandbox