Allow passing key to Portals

[bdrtsky]

I am animating Tooltip with Framer Motion AnimatePresence and discovered an issue when you fast hover on multiple tooltips, Framer Motion exit transition got disrupted and Tooltips stays in the dom on half way on exit.

Framer Motion docs recommends to pass key to animated node. The thing is, my animated Tooltip node gets wrapped into Radix Portal div, and there's no way to pass key to it, so Framer Motion could track it properly. Here's how I use it

<AnimatePresence>
      {open && (
          <RadixTooltip.Portal forceMount>  // KEY SHOULD BE HERE
            <RadixTooltip.Content
              ref={forwardedRef}
              {...props}
              asChild
              className={clsx("TooltipContent", props.className)}
            >
              <motion.div
                key={key}
                {...contentAnimation[props.side ?? "top"]}
              >
                {props.children}
                <TooltipArrow />
              </motion.div>
            </RadixTooltip.Content>
          </RadixTooltip.Portal>
      )}
    </AnimatePresence>

[bdrtsky]

Just double checked, this div that I can pass key to seems to be a Popper node with data-radix-popper-content-wrapper attribute. Any way to pass key to it?

[b0yblake]

You should look inside the TooltipPortal of packages, that provider now accept scope | forceMount. I wonder how you can not use the normal way of React is wrap that layout ? and passing that key of AnimatePresence

[b0yblake]

It's hard to digest by look that code, please feel free to reproduce that code by codesandbox