Dynamic Transition classes do not change instantly (continue #2550)

[ycs77]

I think the issue #2550 is still not resolved. I have made the changes based on your suggestions, but the bug is still present.

Below is the updated repo URL:

https://codesandbox.io/p/sandbox/headlessui-transition-with-floatingui-update-placement-bug-updated-y2hhrj?file=%2Fsrc%2FApp.jsx

And follow the reproduction steps will see the bug is still present.

[ycs77]

I found a solution. Using the useTransitionStatus() hook from Floating UI can make the transition direction and placement consistent. Here is an example:

https://codesandbox.io/p/sandbox/floatingui-flip-update-placement-bug-with-usetransition-ym78qk?file=%2Fsrc%2FApp.jsx

import { useState, useRef } from "react";
import { Popover } from "@headlessui/react";
import {
  useFloating,
  useTransitionStatus,
  flip,
  autoUpdate,
} from "@floating-ui/react";

export default function App() {
  const [show, setShow] = useState(false);
  const { context, x, y, strategy, placement, refs } = useFloating({
    open: show,
    placement: "bottom-start",
    middleware: [flip()],
    whileElementsMounted: autoUpdate,
  });
  const { isMounted, status } = useTransitionStatus(context);

  return (
    <div className="relative h-[400px] p-4 border border-black overflow-y-auto">
      <Popover className="py-[300px]">
        <Popover.Button
          ref={refs.setReference}
          onClick={() => setShow((show) => !show)}
        >
          Button
        </Popover.Button>
        {isMounted && (
          <Popover.Panel
            static
            className="
              w-[200px] h-[100px] border border-black
              data-[status=open]:transition data-[status=open]:duration-200
              data-[status=initial]:opacity-0
              data-[status=initial]:data-[placement^=top]:translate-y-4
              data-[status=initial]:data-[placement^=bottom]:-translate-y-4
              data-[status=close]:transition data-[status=close]:duration-200
              data-[status=close]:opacity-0
              data-[status=close]:data-[placement^=top]:translate-y-4
              data-[status=close]:data-[placement^=bottom]:-translate-y-4
            "
            ref={refs.setFloating}
            style={{
              position: strategy,
              top: y ?? 0,
              left: x ?? 0,
            }}
            data-placement={placement}
            data-status={status}
          >
            content...
          </Popover.Panel>
        )}
      </Popover>
    </div>
  );
}

• useTransitionStatus docs: https://floating-ui.com/docs/useTransition#usetransitionstatus
• useTransitionStatus source: https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/hooks/useTransition.ts#L121-L210

This is the solution I found so far, but I don't know how to achieve the same goal using only the Transition component of Headless UI. Is there any chance that Headless UI can solve this problem?

[RobinMalfait]

Going to move this to a discussion since I don't believe this is a Headless UI bug.

The Transition component is applying the classes you are defining in the enter, enterFrom, enterTo, ... classes.

If the solution provided here #2550 (comment) doesn't work then it means that the placement value is not updated at the right time (which is coming from another library).

If your solutions works, then I would suggest to use that if it solves all your issues. If you really do want to use the Transition component instead, then wrapping the Popover.Panel with the Transition component should do the trick (without providing any classes). The Transition component should still wait for the transition to finish before unmounting.

An updated example looks like this: https://codesandbox.io/p/sandbox/floatingui-flip-update-placement-bug-with-usetransition-forked-2j8qzj?file=%2Fsrc%2FApp.jsx%3A1%2C1