Initial state & API for Disclosure

[sebwas]

Hi,

I was wondering if it was by design or for other reasons that the Disclosure component is not able to accept an initial state (open/closed), and also offers no API to set the state programmatically, i.e. you can't create a closed Disclosure, nor can you open it when the user clicks on an unrelated button for example.

Is this something that is planned? Is this something that I could open a PR for?

Thank you!

[ahku]

+1 on this one.

Right now I'm hacking it by reversing the logic (showing open state when !open), but this makes the accessibility attributes kind of useless.

[sebwas]

@RobinMalfait a penny for your thoughts on programmatically controlling the component?

[Toub]

Initial state has now been implemented with Disclosure.defaultOpen attribute: https://headlessui.dev/react/disclosure#disclosure

Now, what adding a controlled component mode, by implementing 2 new attributes on Disclosure component:

• isOpen: if set, override internal component open state
• onChange: (open: boolean, source='internal'|'external') => void: event triggered when component state changes

I am thinking about react, not sure about the impact in vue world.

Edit: Dialog API is already implementing something similar https://headlessui.dev/react/dialog

[Toub]

Related discussions:

• Feature: Close Disclosure Manually #475
• Programmatically close Disclosure Component #433