Most components should be able to be opened programatically

[kennedyjustin]

Apologies if this has been hashed out before, but a major impediment to using this library smoothly is the scenario where components (like a Popover, Disclosure, etc.) must be opened manually/programatically.

The usual scenario is something like a search bar, where a popover below must be opened once the user starts typing. Obviously the use did not press a button, so theres no way to do it now.

I found the Dialog (Modal) component works really well, and I assume a similar API can be built with Popover/Disclosure, etc.

[hartmut-co-uk]

ref

• Opening disclosures manually (complementing `close()`) #1662

[douglasdc]

You should be able to catch the button reference, use the button event as a forwardRef. It's not that ideal, but work fine.

export const Collapse = React.forwardRef<CollapseRef, Props>(
  ({ children }, ref) => {
    const dRef = useRef<HTMLButtonElement>(null);

    useImperativeHandle(ref, () => ({
      toggle
    }));

    function toggle() {
      dRef.current?.click();
    }

    return (
      <Disclosure>
        <Disclosure.Button ref={dRef} className="hidden" />
        <Disclosure.Panel className="text-gray-500">
          {children}
        </Disclosure.Panel>
      </Disclosure>
    );
  }
);