How to have Dialog with Tooltip where the tooltip does not reopen when I close the Dialog

[DevDeepakBhattarai]

I am currently using the code below for the tooltip dialog combo

<Dialog
      open={isModalOpen}
      onOpenChange={async (open) => {
        setIsModalOpen(open);
        closeTooltip();
      }}
    >
      <TooltipProvider>
        <Tooltip>
          <DialogTrigger asChild>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                id="browse-prompt"
                ref={triggerRef}
                className="grid aspect-square h-9 w-9 place-items-center rounded-full p-0 hover:bg-accent"
              >
                <Chrome className="h-5 w-5 text-white" />
                <span className="sr-only">Browse Prompts</span>
              </Button>
            </TooltipTrigger>
          </DialogTrigger>
          <TooltipContent>
            <h3 className="text-base font-semibold">Browse Prompt</h3>
            <p>Find useful prompts from others</p>
            <Arrow color="white" fill="white"></Arrow>
          </TooltipContent>
           // Dialog Content
        
             </Tooltip>
      </TooltipProvider>
    </Dialog>

But when ever I close the dialog the tooltip reopens , I don't want that behavior.
I tried to use seperate state for the tooltip , and set the tooltip closed when ever my dialog was open but , it did not work as I had set
the onOpenChange of the tooltip to setIsTooltipOpen. It seems like the tooltip is opened after some time

I also tired to dispach a mouseout event in the button but that also did not work.
I tried clicking on the document after I closed the dialog and even that did not work
How can i fix it ?

[joelfloressottile]

This has been an issue for me too. Tried doing my own custom hook to restore focus and to avoid too many components being nested but the tooltip is popping up when restoring the focus to the element that opened the dialog.

[Jeius]

I also have this issue, what I did was add onCloseAutoFocus={(e) => e.preventDefault()} to the dialog content.

[joelfloressottile]

Can't test it out right now but docs say:

Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.

If that's the case then this would hurt your accessiblity, both for screenreaders and keyboard users, as you want the focus to be restored to the element that opened the dialog. You can check a quick example of focus restoration here

[Jeius]

Oh right, I completely forgot about that part. Well, I guess there's no sleeping again this week.