Popover OverlayArrow not rotating #6655

NickWoodward · 2024-07-01T16:07:51Z

NickWoodward
Jul 1, 2024

Hi all,

Just struggling to get my Popover OverlayArrow to change direction and face upwards when it renders below the button that triggers it.

Screen.Recording.2024-07-01.165740.mp4

I've replicated part of the problem in this codesandbox demo

I tried to create my component using the react-aria example, here.

Here's how I'm structuring the code:

// App.tsx

<div class="relative text-start text-[22px] text-teal-400">
  <span>Featured Jobs</span>
  <InfoButton className="w-4 h-4 text-slate-200 absolute right-0 top-0 translate-x-[calc(100%+0.5rem)] -translate-y-1/2" client:visible/>
</div>

// InfoButton.tsx

export const InfoButton = ({ className }: Props) => {
  return (
    <DialogTrigger>
      <Button
        className={cn("w-6 h-6 text-white", className)}
        onPress={() => console.log("ha")}
      >
        <InfoIcon />
      </Button>
      <InfoPopover />
    </DialogTrigger>
  );
};

// InfoPopover

export const InfoPopover = () => {
  return (
    <Popover className={"mr-[12px]"}>
      <OverlayArrow>
        <svg
          viewBox="0 0 12 12"
          className="block fill-white group-placement-bottom:rotate-180 w-4 h-4"
        >
          <path d="M0 0L6 6L12 0" />
        </svg>
      </OverlayArrow>
      <Dialog>
        <div className="flex flex-col bg-slate-50 px-4 py-3 rounded-lg shadow-lg">
          <div className="text-teal-500 font-medium">Multiple Selections</div>
          <div className="mt-1">
            Select each job you're interested in &nbsp;
            <TickIcon className="-translate-y-[1.5px] inline-flex w-6 h-6 text-teal-500" />
            &nbsp; Then click "Apply".
          </div>
        </div>
      </Dialog>
    </Popover>
  );
};

Appreciate any help!

Nick