Programmatically close Disclosure Component

[braydoncoyer]

Hi all,

I saw another issue opened about the Disclosure component but wanted to open a new thread to keep things tidy.

My goal is to build an Accordion in React. I understand that technically, Disclosures and Accordions share functionality but remain distinct elements. A Disclosure may have multiple panels open at one time. An Accordion usually only shows one active panel.

Given the current API, is there a way to programmatically close the Disclosure.Panel?
If I only want a single panel open at a time, that would mean I would need to close any pre-existing panels before opening the panel the user clicked on.

I've got a flawed version working by setting the Disclosure.Panesl to static, and calling a helper function to determine when they should show or hide themselves. The issue is that the Disclosure.Button state and the custom state I'm using to control opening and closing get out of sync.

Am I headed in the right direction, or is the Disclosure component not meant to be used this way?

On a related but slightly different topic, how would I set a Disclosure.Panel to be opened by default?

Thanks for your help!

[AnandChowdhary]

I have the exact same use case. Any thoughts, @RobinMalfait?

[haddigan]

Same. I was about to submit essentially an identical ticket before I checked the Discussions tab and found this thread. I went down exactly the same path as @braydoncoyer and hit the exact same dead end - a flawed implementation using static. I think this is a very common and valid use case, hoping a solution is on the horizon

[DVGalarza]

This isn't ideal, but is working right now for my purposes. I just needed to programmatically close the Disclosure when a form within the Disclosure is submitted. I gave the disclosure-toggle-btn class to the Disclosure.Button.

(document.querySelector('.disclosure-toggle-btn') as HTMLElement).click()   

[offwork]

Headlessui is very hard to manage programmatically, forcing a lot of manipulation in the DOM to be able to do it. Unfortunately, the documents are insufficient, so this journey, which we take for less work, causes more costs.

[offwork]

It is very difficult to manage Headlessui's panels manually, especially after user triggered events such as scroll. It's possible to handle close and open render props for javascript, but typescript doesn't seem to be able to do that.

[offwork]

The point I came to after 1 week was to remove the existing headlessui components and replace them with components that I developed myself.