<Transition> now requires a `show` prop

[UrielRadzyminski1]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

v2.1.0

What browser are you using?

Chrome

Reproduction URL

Reproduction URL

That code works on version 2.0.0, and doesnt on 2.1.0

Describe your issue

The show prop in the Transition component changed behaviour between 2.0 and 2.1. Now it is required and the types do not reflect it. In the reproduction URL you can check a code snippet that exemplifies this issue.

The error is: Uncaught Error: A \<Transition /> is used but it is missing a show={true | false} prop.

[RobinMalfait]

Hey!

The issue you are seeing is that the nested Transition should be a TransitionChild instead:

- <Transition
-   //show={props.show}
+ <TransitionChild
    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-gray-500 bg-opacity-75 transition-opacity" />
- </Transition>
+ </TransitionChild>

This is needed because it will coordinate with the parent Transition component to make sure that the Dialog only unmounts once all TransitionChild components are also done transitioning. Whenever you use a new Transition component you create a new boundary that requires the show prop.

Hope this helps!

[UrielRadzyminski1]

Hey!

The issue you are seeing is that the nested Transition should be a TransitionChild instead:

- <Transition
-   //show={props.show}
+ <TransitionChild
    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-gray-500 bg-opacity-75 transition-opacity" />
- </Transition>
+ </TransitionChild>

This is needed because it will coordinate with the parent Transition component to make sure that the Dialog only unmounts once all TransitionChild components are also done transitioning. Whenever you use a new Transition component you create a new boundary that requires the show prop.

Hope this helps!

That is okay, I understand that. However, the typescript interface of Transition does not accurately represent this, as it allows for an undefined show prop. That is my issue.