Dynamic classes on Dialog.Panel no longer cause dialog fadeout but are not applied

[az-nextsec]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.17

What browser are you using?

Chrome

Reproduction URL

function App() {
  const [showState, setShowState] = useState(true);
  const [someState, setSomeState] = useState(true);
  return (
    <Transition appear show={showState} as={Fragment}>
<Dialog as="div" ref={forwardedRef} open={true} static onClose={() => { setShowState(false) }} className="relative z-50">
            <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
                <div className="fixed inset-0 bg-[black]/60 pointer-events-none" />
            </Transition.Child>
            <div className="fixed inset-0 overflow-y-auto">
                <div className="flex items-center justify-center min-h-full px-4 py-8 ">
                    <Transition.Child
                        as={Fragment}
                        enter="ease-out duration-300"
                        enterFrom="opacity-0 scale-95"
                        enterTo="opacity-100 scale-100"
                        leave="ease-in duration-200"
                        leaveFrom="opacity-100 scale-100"
                        leaveTo="opacity-0 scale-95"
                    >
                        <Dialog.Panel className={someState ? 'w-full max-w-4xl p-0 my-8 text-black border-0 rounded-lg panel dark:text-white-dark' : 'w-full max-w-2xl p-0 my-8 text-black border-0 rounded-lg panel dark:text-white-dark'}>
                          <button type="button" onClick={() => setSomeState(!someState)}>Click me</button>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
  )
}

You can use one of the starting projects on CodeSandbox:

I tried this but it wouldn't let me save: https://codesandbox.io/s/github/tailwindlabs/reproduction-headlessui-react

Describe your issue

I found this issue that has been resolved #2446 (this was my original problem on older version of headlessui).

Unfortunately, with newest version while the dialog no longer fades out the width is not updated (see my class list) if I want it to change dynamically

[RobinMalfait]

Hey

Can you try to provide a minimal reproduction repo? You should be able to open the link you shared and fork it first. There should be a Fork button in the top right corner.

[az-nextsec]

@RobinMalfait I tried it again - I authorise it (either with Apple id or github, same result, and tried 3 browser already), click fork then try to save and it is asking me to login again, and so in the loop.

That said you should be able to see it if you just past my code into a copy of that remote project app.jsx.

[RobinMalfait]

Hey!

I figured out what you meant and could reproduce it locally. This should be fixed by #2722, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.