Expose the open state, please

[Fxlr8]

Hi. I really like the idea of headless components. But I found it really inconvenient to use in some advanced cases. Especially if I want to open and close something programmatically. That would be really amazing if you provide the component's state as a hook. I really don't like the render prop pattern as it makes the code look ugly.

What if we allow to pass open and setOpen from the outside? Like you already do in the Dialog component. It would make other components much more flexible.

For example, I was trying to implement input suggestions. The suggestions' window should open when user starts typing. Unfortunately I could not make it work using Listbox, Popover or Menu. Because there is no way to open it programmatically. Please consider exposing the open state somehow.

Also it would be great if you export all your internal hooks from the package. They are really useful when you want to build your own interactive component.

[muuhoffman]

I had this same issue. I want to open the listbox from another component and I can't figure out how to programmatically change the open state since it's a render prop. Is there any work arounds? I wish it worked like Dialog too.

[jonathanstanley]

currently only the dialog has it:

would love for all components to have this same option.

[TheFrenchBuck]

That's frustrating how it is not available for other component !

[heymartinadams]

💯 Wondering why this simple, yet critical feature doesn’t exist for the other components.

Was able to create a workaround:

<Popover>
  <Popover.Button onClick={() => setOpen(prev => !prev)}>
...

[masaez]

Same need here. Another idea would be to at least expose onOpen, onClose events.

[NetFlareSuperAdmin]

Same need.

[johnrich85]

Same need. I have a sidebar Menu that I'd like to open by default in some cases. I could just force this with the static property, but then closing it becomes awkward. Would be great to be able to just pass in the open state as a prop, or at least hook into change events so that I could keep my other state in sync

[redhog]

I need this for a ListBox. Having to reimplement all the existing triggers to mutate the open state is a lot of work, and defeats the purpose of using the component.

I have some non standard omponents inside the listbox, that need to when clicked be able to close the listbox just like the standard ListBoxOption.

[thijssmudde]

@redhog how did you implement closing the listbox from a custom element inside it?

[redhog]

I didn't; I gave up and am living with a crappy UX (select list item, then click outside to close) :(

[ahummel25]

Has anyone found any workarounds for replicating onOpen/onClose events for components that don't have them exposed (which appears to be most)?

[imdotnhsang]

same issue, but I found a solution for me. I created buttons with position absolute (fake outside). When I click a button above (like close, clear all, apply filter), it will run onClick (if have) and close.

<Listbox multiple>
  {({ open }) => (
    <div>
      <Listbox.Button>Open</Listbox.Button>

      <Transition show={open}>
        <div>
          <button className="absolute right-4 top-4">
            Close
          </button>

          <div className="flex gap-4 justify-end absolute bottom-6 right-6">
            <Button>
              Clear all
            </Button>
            <Button>
              Apply filter
            </Button>
          </div>

          <Listbox.Options static>
            <div>
              <p className="text-semantic-primary font-bold">{title}</p>
            </div>

            <div className={twMerge('flex flex-col gap-2')}>
              <div className="flex gap-4 flex-wrap">
                {options.map((option) => (
                  <Listbox.Option key={option.value} value={option}>
                    {({ active }) => (
                      <span className={twMerge(active && 'border-sky/20')}>
                        {option.label}
                      </span>
                    )}
                  </Listbox.Option>
                ))}
              </div>
            </div>
            <div className="h-12" />
          </Listbox.Options>
        </div>
      </Transition>
    </div>
  )}
</Listbox>

[fergus-haywood]

Following up on this, it would be very helpful to be able to the open/close states from other components while retaining the native UI behaviour.

Using an onClick is helpful for tracking when a Listbox has been opened, but you lose the closed state when the Listbox is closed.

[dimitribarbot]

I managed to work around this issue by splitting my Listbox component into two and using a ref to hold the current open state provided by HeadlessUI Listbox render prop.

For instance, using HeadlessUI Listbox basic example, first:

const people = [
  { id: 1, name: "Durward Reynolds" },
  { id: 2, name: "Kenton Towne" },
  { id: 3, name: "Therese Wunsch" },
  { id: 4, name: "Benedict Kessler" },
  { id: 5, name: "Katelyn Rohan" }
];

export default function ListboxWithOpenState({ onOpen, onClose }) {
  const [selectedPerson, setSelectedPerson] = useState(people[0]);

  return (
    <div className="mx-auto h-screen w-52 pt-20">
      <Listbox value={selectedPerson} onChange={setSelectedPerson}>
        {({ open }) => (
          <ListboxHandlingOpenState
            people={people}
            selectedPerson={selectedPerson}
            open={open}
            onOpen={onOpen}
            onClose={onClose}
          />
        )}
      </Listbox>
    </div>
  );
}

Then :

export default function ListboxHandlingOpenState({
  people,
  selectedPerson,
  open,
  onOpen,
  onClose
}) {
  const openStateRef = useRef(false);

  useEffect(() => {
    if (open !== openStateRef.current) {
      openStateRef.current = open;
      if (open) {
        onOpen?.();
      } else {
        onClose?.();
      }
    }
  }, [open, onOpen, onClose]);

  return (
    <>
      <ListboxButton>{selectedPerson.name}</ListboxButton>
      <ListboxOptions anchor="bottom">
        {people.map(person => (
          <ListboxOption
            key={person.id}
            value={person}
            className="data-[focus]:bg-blue-100"
          >
            {person.name}
          </ListboxOption>
        ))}
      </ListboxOptions>
    </>
  );
}

And to use it :

<ListboxWithOpenState
  onOpen={() => console.log("Listbox is open.")}
  onClose={() => console.log("Listbox is closed.")}
/>

[hmaesta]

This is my take in an attempt to close a Listbox from its floating menu.

Exposing the open state would make this incredibly straightforward, but I had to be creative since this isn't available (hopefully one day!)

It consists in programmatically clicking the ListboxButton. Not something out of this world, but I hope it can help people struggling with similar issues.

Sandbox

ㅤ

const listboxButtonRef = useRef();

const handleCloseListbox = () => {
  const listboxButtonElement = listboxButtonRef.current;
  listboxButtonElement?.click();
};

<Listbox>
  <ListboxButton ref={listboxButtonRef}>(...)</ListboxButton>

  <ListboxOptions>
    {options.map((option) => (...))}

    <button onClick={handleCloseListbox}>OK</button>
  </ListboxOptions>
</Listbox>