Unable to close the dropdown after double selection

[Uni2K]

Describe the bug When using a custom ItemRenderer, double selecting a single item will remove the capability to close the dropdown when clicking outside.

Sandbox / Git Repo https://codesandbox.io/s/naughty-dewdney-wn7v74?file=/src/App.js

To Reproduce Steps to reproduce the behavior:

1. Check out the repo
2. Select a single item
3. Deselect the item
4. click outside of the dropdown
5. It won't close

Expected behavior It closes when clicked outside

Screenshots

Desktop (please complete the following information):

• OS: Win 11
• Chrome
• Latest

Additional context Maybe I use the Default Item renderer wrong, but there is no working example in the docs and this was the only thing I found in the soruce code.

[PhucNguyenHDW]

Hi, I have the same issue. Any update on this one?

[Souravvmishra]

Checkout this : https://codesandbox.io/p/sandbox/react-multi-select-example-uqtgs?file=%2Fsrc%2FApp.js%3A1%2C1-34%2C1

[PhucNguyenHDW]

Hi @Souravvmishra If we use the default list, it will work as expected. Bug case is When using a custom ItemRenderer

[PhucNguyenHDW]

I work around this by using the useClickAway hook in @uidotdev/usehooks Put the MultiSelect component in div with ref from useClickAway When clicked outside, trigger function to find to class .dropdown-heading, then trigger click event. Worked!

[gauthamdas]

@Uni2K Please check the focus of the dropdown. When you use a ItemRender after first click, the Dropdown loses focus and cannot be closed clicking outside.