What's needed for conditionally rendering OverlayContainers?

[brandonpittman]

I have a tooltip in an OverlayContainer, and if I render the from the start and use CSS to show and hide them, the visual effect is what I desired.

import type { ReactElement } from "react";

import {
  OverlayContainer,
  useTooltipTrigger,
  useOverlayPosition,
} from "react-aria";
import { useTooltipTriggerState } from "react-stately";
import { useRef, cloneElement } from "react";

import { classNames } from "~/helpers/class-names";

export type TooltipTriggerProps = {
  isDisabled?: boolean;
  delay?: number;
  trigger?: "focus";
  children: ReactElement;
  tooltip: string;
};

export function WithTooltip(props: TooltipTriggerProps) {
  let state = useTooltipTriggerState({ delay: 0 });

  let triggerRef = useRef<HTMLButtonElement | null>(null);
  let overlayRef = useRef<HTMLDivElement | null>(null);

  let { triggerProps, tooltipProps } = useTooltipTrigger(
    props,
    state,
    triggerRef
  );

  let { overlayProps, arrowProps } = useOverlayPosition({
    placement: "top",
    targetRef: triggerRef,
    offset: 12,
    overlayRef,
    isOpen: state.isOpen,
    shouldFlip: true,
  });

  return (
    <>
      {cloneElement(props.children, { ...triggerProps, ref: triggerRef })}
      <OverlayContainer>
        <div
          ref={overlayRef}
          {...overlayProps}
          className={classNames(
              "transition",
              state.isOpen ? "opacity-100" : "opacity sr-only"
            )}
        >
          <div
            className="absolute -bottom-1.5 isolate h-4 w-4 -translate-x-1/2 rotate-45 rounded-sm bg-neutral"
            {...arrowProps}
          />
          <div
            {...tooltipProps}
            className="isolate whitespace-nowrap rounded bg-neutral p-1 text-inverted"
          >
            {props.tooltip}
          </div>
        </div>
      </OverlayContainer>
    </>
  );
}

If I try to conditionally render them like the useOverlayTrigger example, I get nothing on hover, but when I move the mouse away, the tooltip renders for a second and then disappears. Debugging the state.isOpen property shows that my state is updating correctly.

With conditional rendering:

      {state.isOpen && (
        <OverlayContainer>
          <div
            ref={overlayRef}
            {...overlayProps}
          >
            <div
              className="absolute -bottom-1.5 isolate h-4 w-4 -translate-x-1/2 rotate-45 rounded-sm bg-neutral"
              {...arrowProps}
            />
            <div
              {...tooltipProps}
              className="isolate whitespace-nowrap rounded bg-neutral p-1 text-inverted"
            >
              {props.tooltip}
            </div>
          </div>
        </OverlayContainer>
      )}

Can anyone tell me what's wrong here?

[brandonpittman]

If you conditionally render a component with an OverlayContainer instead of conditionally rendering the OverlayContainer, things are fine.