defaultOpen not working on first initial disclosure panel

[ARKAR-PHYO]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.6

What browser are you using?

Chrome

Describe your issue

I'm trying to make first disclosure panel always to open and can able be close . I tried defaultOpen and static but it doesn't meet my requirements. Kindly request how am i gonna do. Thanks.

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

Please provide a reproduction repo or a codesandbox of what you tried so that we can see where things went wrong.

[ARKAR-PHYO]

@RobinMalfait,

The main component and content are here. Kindly request help me. 🙏🏻

Main Component

import { NextPage } from "next";
import { websiteData } from "../../../lib/data";
import { Disclosure, Transition } from "@headlessui/react";
import { ChevronUpIcon } from "@heroicons/react/solid";

const WhatWeDo: NextPage = () => {
  return (
    <div className="px-4 pb-16 mx-auto lg:py-36 max-w-9xl sm:px-6">
      <div className="text-center">
        <h4 className=" text-slate-100">{websiteData.whatWeDo.title}</h4>
        <h1 className="mt-3 text-2xl font-semibold text-slate-100 lg:text-4xl font-DMSans">
          {websiteData.whatWeDo.subTitle}
        </h1>
      </div>
      <div className="w-full p-2 mx-auto ">
        {websiteData.whatWeDo.services.map((service, i) => (
          <Disclosure key={i + 1}>
            {({ open }) => (
              <>
                <Disclosure.Button className="flex items-center text-lg justify-between w-full py-4 border-b-0.5 last:border-0 border-slate-100 ">
                  <div className="space-x-6 text-slate-100">
                    <span className="">{i + 1}/ </span>
                    <span className="">{service.title}</span>
                  </div>
                  <ChevronUpIcon
                    className={`${
                      open ? "rotate-180 transform" : ""
                    } h-5 w-5 text-slate-100`}
                  />
                </Disclosure.Button>
                <Transition
                  show={open}
                  enter="transition duration-100 ease-out"
                  enterFrom="transform scale-95 opacity-0"
                  enterTo="transform scale-100 opacity-100"
                  leave="transition duration-75 ease-out"
                  leaveFrom="transform scale-100 opacity-100"
                  leaveTo="transform scale-95 opacity-0">
                  <Disclosure.Panel className="px-8 pt-4 pb-2 text-sm text-slate-100">
                    {service.text}
                  </Disclosure.Panel>
                </Transition>
              </>
            )}
          </Disclosure>
        ))}
      </div>
    </div>
  );
};
export default WhatWeDo; 

Data

export const websiteData = {
  whatWeDo: {
    title: "What We Do",
    subTitle: "subTitle",
    services: [
      {
        title: "Software Development",
        short: "",
        text: "Software Development body text",
        getQuotation: "#",
      },
      {
        title: "Software Customization",
        short: "",
        text: "Software Customization body text",
        getQuotation: "#",
      },
      {
        title: "Reliable system integration services",
        short: "",
        text: "Reliable system integration services body text",
        getQuotation: "#",
      },
      {
        title: "Service and Maintenance",
        short: "",
        text: "Service and Maintenance body text.",
        getQuotation: "#",
      },
      {
        title: "Dedicated Development Team",
        short: "",
        text: "Dedicated Development Team body text",
        getQuotation: "#",
      },
    ],
  },
};

[agusismawan]

@RobinMalfait any update for this issue ?

[patrick-mcdougle]

We are experiencing this issue and can provide a little more context.

We're trying to build a feature where if the window.location.hash matches the id of one of the disclosures, that it is open by default on page load. We are using a server rendered framework that cannot access the url hash, so it renders all of the disclosures as defaultOpen=false on the initial page load. In order to avoid the hydration mismatch warnings, we're trying to set defaultOpen after the initial render. But since the defaultOpen prop is only used to initialize the reducer, it doesn't matter on subsequent renders. It'd be great if there was a useEffect wrapping this prop that could trigger an open event on the reducer if it flips from false to true.

Any thoughts on how to solve this use case? We're probably going to have to abandon using the Disclosure component to solve this in its current state.

[ui-jb]

A site that I'm working on had a very similar requirement.
This post from 2021 explains a workaround for this particular issue.
While not ideal, it allowed us to continue using the Disclosure component.
I left a comment in my code explaining what was happening with the key prop and linked to that specific Github comment for context.