Tooltip – preventing focus return after opening a file dialog

[sebpowell]

I have the following use case: a button wrapped in a tooltip that triggers a file selection dialog – the basic structure is this:

<Tooltip>
  <TooltipTrigger asChild>
    <IconButton
      icon="File"
      size="small"
    />
  </TooltipTrigger>
  <TooltipContent>Select file</TooltipContent>
</Tooltip>

When a file is selected, focus is returned to the button which shows the tooltip again – and something I don't want to happen. I thought there might be an option to disable tooltips on focus, and only show them on hover, or prevent focus return but couldn't see anything like that.

Eventually, I settled for the following controlled state, which seems to do the trick:

const EditorMenuButton = (props: EditorMenuButtonProps) => {
  const { icon, className, isActive, title, ...rest } = props;

  const buttonRef = useRef<HTMLButtonElement>(null);

  const [open, setOpen] = useState(false);

  const timeoutRef = useRef<NodeJS.Timeout>(undefined);

  const TOOLTIP_CLOSE_DELAY = 50;

  return (
    <Tooltip open={open}>
      <TooltipTrigger
        onMouseEnter={() => {
          clearTimeout(timeoutRef.current);
          setOpen(true);
        }}
        onMouseLeave={() => {
          /**
           * When a child element is positioned absolutely outside its parent's boundaries
           * (like our tooltip content), moving the mouse to the child will trigger the
           * parent's onMouseLeave event. The delay is added to prevent a flicker when
           * moving from trigger to tooltip content.
           */
          timeoutRef.current = setTimeout(() => {
            setOpen(false);
          }, TOOLTIP_CLOSE_DELAY);
        }}
        asChild
        onFocus={(event) => {
          /**
           * When focus returns from a file input dialog, event.relatedTarget is null.
           * We want to prevent the tooltip from showing in this case, while still
           * allowing it to show on normal keyboard focus events.
           */
          if (event.relatedTarget === null) {
            setOpen(false);
            /**
             * Programmatically remove focus from the button to prevent focus styles
             * from persisting after the file input dialog closes
             */
            buttonRef.current?.blur();
          } else {
            setOpen(true);
          }
        }}
        onBlur={() => setOpen(false)}
      >
        <IconButton
          ref={buttonRef}
          icon={icon}
          size="small"
          {...rest}
        />
      </TooltipTrigger>
      <TooltipContent>{title}</TooltipContent>
    </Tooltip>
  );
};

It works well, but seems somewhat complicated – wondering if there's a better way? Any advice gratefully received.