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.

[zahid-nazir]

As pointed out by @PhucNguyenHDW it's about maintaining reference and enclosing MultiSelect component in a div with ref. But I didn't want to use a third-party package for a small purpose unless necessary. Here's how I am doing it...

  const [dropdownOpen, setDropdownOpen] = useState(false)
  const dropdownRef = useRef(null)

Managing the side-effects below

  useEffect(() => {
      const dropdownHeading = dropdownRef.current.querySelector('.dropdown-heading')
      if (dropdownHeading) {
        dropdownHeading.click()
        setDropdownOpen(false)
      }
  }, [dropdownOpen])

Wrap MultiSelect component in div

    <div ref={dropdownRef}>
       <MultiSelect ...props />
    </div>

In my customItemRenderer, I have a selectAll event handler that updates the dropdownOpen state.

I hope this helps...