Add close event to listbox

[kristofferdamborg]

I've had the need for some way to tell when the listbox component closes, but there doesn't seem a way to tell as of now. Would it be possible to add a close event or something, that triggers whenever the listbox closes?

Example: I've got a listbox component with multiple set to true and I want to fetch some data from the selected options, but only the when the list is closed.

[briavicenti]

Also really need this functionality! The contents of our Listbox are fetched dynamically depending on the previous selection, and we only want to fetch the new set once the Listbox has been closed.

[briavicenti]

In case anyone finds this thread and still hopes to accomplish this outside of HeadlessUI, here's our solution. We use the Floating-UI library to help manage the position & existence of the floating (dropdown menu) element for the Listbox. This means we already have a ref to the floating element, which is set to null as the Listbox is open or closed. We combine that ref with the usePreviousDifferent hook from rooks to watch for changes in its existence.

    const floatingElement = elements.floating;
    const previousFloatingElement = usePreviousDifferent(floatingElement);

  // onMenuToggle is a callback that takes an "isMenuOpen" param

  useEffect(() => {
    if (!floatingElement && previousFloatingElement) {
      onMenuToggle(false);
    } else if (floatingElement && !previousFloatingElement) {
      onMenuToggle(true);
    }
  }, [floatingElement, onMenuToggle, previousFloatingElement]);

Another possible solution would be to watch for the change of the aria-expanded attribute on the Listbox toggle button. We previously did that using the useMutationObserver hook from rooks, but that implementation quietly broke. See relevant issue here to watch for changes if you want to use that hook, but you could also probably spin up your own observer.

[allyfx]

I hope this helps someone who is looking for a simple solution.

I have a Listbox with a search inside of it, and I wanted to remove the search value when the Listbox closes. The Listbox will pass the open state to its children as props, so I added a wrapper component that received this open state and handled the rest.

<Listbox {...}>
      {({ open }) => {
        useEffect(() => {
          if (!open) {
            setSearchValue('')
          }
        }, [open]);

        return ()
      }
</Listbox>

Adding this solved my issue, but you can adapt to create your own onClose event if you want. I tested the performance, and it didn't affect my pages (they have multiple Listboxes) or the search.

[brunoandradebr]

If you want to keep it clean, you just need to set a ref, a ref in react is a function that has a element parameter - in this case the options container. Here you can set a state based on the element that ref provides. When options container is not visible it will be null (closed), and when opened it will return the html element (ul). Hope it helps.

    const [optionsContainerElement, setOptionsContainerElement] = React.useState(null);
  
    React.useEffect(() => {
      // ever you open/close options list
    }, [optionsContainerElement]);

    return (
      <Listbox>
        <Listbox.Button>my label</Listbox.Button>
          
        <Listbox.Options ref={(node) => setOptionsContainerElement(node)}>
            {options?.map((option) => (
              <Listbox.Option value={option}>{option.label}</Listbox.Option>
            ))}
        </Listbox.Options>
      </Listbox>
    )

[nikolasgioannou]

Unfort none of these worked for me. This worked though:

      <ListboxOptions
        onTransitionEnd={(e) => {
          if (e.currentTarget.hasAttribute('data-closed')) {
            // DO STUFF HERE
          }
        }}
        transition
      >