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

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

Start with the SelectAsync usage and linked Loom reproduction, focusing on async multiselect behavior when closeOnSelect={false}. Reproduce the case by selecting multiple users and clicking elsewhere on the page; done means the dropdown closes without requiring another click on the component.