Bug Conditional className when using DisclosurePanel inside Transition

[zulfio]

What package within Headless UI are you using? @headlessui/react

What version of that package are you using? v2.0.4

What browser are you using? Chrome

Reproduction URL https://playcode.io/1899014

Code

<Disclosure defaultOpen={true}>
  <Transition
    show={true}
    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'
  >
    <DisclosurePanel
      onClick={()=> setIsOpen(c => !c)}
      className={`bg-slate-100 ${ isOpen ? 'text-slate-900' : 'text-rose-900' }`}
    >
      Change
    </DisclosurePanel>
  </Transition>
</Disclosure>

Describe your issue I have conditional className for DisclosurePanel. When we click the change button, it's merging the class instead of changing the class.

It's only happen when using <Transition>, if we remove the <Transition> it's working fine.

Expected output: "bg-slate-100 text-slate-900"

Actual output: "bg-slate-100 text-slate-900 text-rose-900"

[guhndr]

Got the same problem with <Transition> and <DialogPanel>.

[RobinMalfait]

This should be fixed by #3303, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.