data-enter is not removed when performing exit transition before enter ends (v2.1.0 transition API regression)

[xsjcTony]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.1.0

What browser are you using?

Chrome

Reproduction URL

Describe your issue

The title is clear enough. Simply open the reproduction and quickly double-click the button. There is supposed to be NO exit transition, however, there is due to the data-enter is still there during the exit transition.

I didn't check whether the same thing happens to exit -> enter quick switch. I think it worths to check that as well while fixing this.

[LeiYao123]

I tried it in version 2.1 and the original API is still usable, like the one below,

I don't know why they need to be deleted from the document, use data - * instead

      <TransitionChild
          enter="ease-out duration-[5000ms]"
          enterFrom="opacity-0 translate-y-8"
          enterTo="opacity-100 translate-y-0"
          leave="ease-in duration-[5000ms]"
          leaveFrom="opacity-100 translate-y-0"
          leaveTo="opacity-0 translate-y-8"
        >

[xsjcTony]

From my perspective the new API is easier to use, but everyone has their own feelings. But issues need to be fixed for any new APIs for sure.

[LeiYao123]

@xsjcTony I think your className was written incorrectly. Please try using my writing method below

<PopoverPanel
          transition
          // className="mt-4 ease-out data-[enter]:duration-500 data-[closed]:opacity-0 data-[closed]:translate-y-6"
          className={clsx([
            // Base styles
            'mt-4 ease-out',
            // Shared closed styles
            'data-[closed]:opacity-0',
            // Entering styles
            'data-[enter]:duration-500 data-[enter]:data-[closed]:translate-y-6',
            // Leaving styles
            'data-[leave]:duration-300 data-[leave]:data-[closed]:translate-y-6',
          ])}
        >

https://headlessui.com/react/transition#different-enter-leave-transitions

[LeiYao123]

Besides, I still feel that the original API is easier to understand

@RobinMalfait I would like to ask if the original API will continue to be useful in future versions

  <TransitionChild
          enter="ease-out duration-[5000ms]"
          enterFrom="opacity-0 translate-y-8"
          enterTo="opacity-100 translate-y-0"
          leave="ease-in duration-[5000ms]"
          leaveFrom="opacity-100 translate-y-0"
          leaveTo="opacity-0 translate-y-8"
        >

[xsjcTony]

@xsjcTony I think your className was written incorrectly. Please try using my writing method below

<PopoverPanel
          transition
          // className="mt-4 ease-out data-[enter]:duration-500 data-[closed]:opacity-0 data-[closed]:translate-y-6"
          className={clsx([
            // Base styles
            'mt-4 ease-out',
            // Shared closed styles
            'data-[closed]:opacity-0',
            // Entering styles
            'data-[enter]:duration-500 data-[enter]:data-[closed]:translate-y-6',
            // Leaving styles
            'data-[leave]:duration-300 data-[leave]:data-[closed]:translate-y-6',
          ])}
        >

https://headlessui.com/react/transition#different-enter-leave-transitions

It's the same @LeiYao123 (I changed enter to [5s] so it's more obvious). It's something wrong in JS, that data-enter is not removed when quickly switched, nothing to do with those classnames. Potentially data-leave is also not removed while quick switched from exit to enter.

https://stackblitz.com/edit/vitejs-vite-or4hkb?file=src%2FApp.tsx

Besides, I don't want any leaving styles, and the same data-[closed] is absolutely redundant for translate-y-6

[xsjcTony]

Still an issue in v2.1.6 👀

[xsjcTony]

@RobinMalfait I've updated all dependencies to the latest in the reproduction, in case you need it. Thanks.