OverlayTrigger - findDOMNode is deprecated in StrictMode

Question

I am using Tooltip overlay from react-bootstrap but getting error findDOMNode is deprecated in StrictMode. As per documentation using the function form of overlaytrigger avoids a React.findDOMNode call, for those trying to be strict mode compliant but I am still getting the error as below.

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
in div (created by Tooltip)
in Tooltip (at NavMenu.tsx:31)
in Transition (created by Fade)
in Fade (created by Overlay)
in Overlay (created by Overlay)
in Overlay (created by OverlayTrigger)
in OverlayTrigger (at NavMenu.tsx:28)
in div (created by ForwardRef)
in ForwardRef (created by Nav)
in Nav (at NavMenu.tsx:27)
in div (created by Context.Consumer)
in Transition (created by ForwardRef)
in ForwardRef (created by Context.Consumer)
in NavbarCollapse (at NavMenu.tsx:23)
in nav (created by Navbar)
in Navbar (at NavMenu.tsx:18)
in StrictMode (at src/index.tsx:13)

Code for OverLayTrigger

<OverLayTrigger 
     key="left" 
     placement="left" 
     overlay={<Tooltip id="tooltip-initials">{`Logged in as ${this.context.user?.name}`}</Tooltip>}>

{
    ({ref, ...triggerHandler}) => (
        <div className="avatar-circle" {...triggerHandler} >
            <span className="initials" id="initials" ref={ref}>
                {`${this.context.user?.given_name.substring(0,1)}${this.context.user?.family_name.substring(0,1)}`}
            </span>
        </div>
    )
}
</OverLayTrigger>

Can you please advise what I am missing above ?

Answer 1

Scratched my head on this issue for a while, but looks like you have to set the transition prop to false. If you still want the transition animation you can add some css at the root of your application:

    .tooltip {
        transition: opacity 0.15s linear;
    }

This worked for me, along with using the function form of OverlayTrigger as you described. Let me know if it works for you!

EDIT: Turns out that this will allow tooltips to fade on enter but not on exit, to allow for this, I made a wrapper component around the Overlay and Tooltip components that allows for the component to keep existing until it fades out:

    interface ITooltipWrapperProps {
      tooltipContent: string;
      tooltipId: string;
      children: ReactElement;
      placement: Placement;
    }
    
    const TooltipWrapper: FC<ITooltipWrapperProps> = (props) => {
      let target = useRef(null);
      let [show, setShow] = useState(false);
      let [exist, setExist] = useState(false);
    
      const onMouseEnter = () => {
        setExist(true);
        setShow(true);
      };
    
      const onMouseLeave = () => {
        setShow(false);
        setTimeout(() => {
          setExist(false);
        }, 150);
      };
    
      return (
        <>
          {cloneElement(props.children, {
            ref: target,
            onMouseEnter: onMouseEnter,
            onMouseLeave: onMouseLeave,
          })}
          <Overlay
            placement={props.placement}
            transition={false}
            show={exist}
            target={target.current}
          >
            {(injectedProps) => (
              <Tooltip
                id={props.tooltipId}
                className={show ? "show" : ""}
                {...injectedProps}
              >
                {props.tooltipContent}
              </Tooltip>
            )}
          </Overlay>
        </>
      );
    };