search

gsoft-inc / sg-orbit

The design system for ShareGate web apps.
https://orbit.sharegate.design
Apache License 2.0
101 stars 37 forks source link

🐛 Tooltips often stay open when hovered fast #1141

Closed alexasselin008 closed 1 year ago

alexasselin008 commented 1 year ago

Describe the bug

tooltip war

Steps to reproduce

I've had luck reproducing this issue when hovering fast over a stack of icons

<Stack gap={1} alignY="center" height="200px" overflowY="scroll" paddingTop="50px">
    <TooltipTrigger flexShrink={0}>
        <EmailIcon  flexShrink={0} />
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0} />
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0}/>
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0}/>
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0}/>
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon flexShrink={0} />
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0}/>
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0}/>
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0}/>
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>

</Stack>

Expected results

alexasselin008 commented 1 year ago

Had to revert my initial fix since it broke that possiblity to mouseover a tooltip. During the investigation, i found out what the real problem was.

The dom structure is like this: 

<Overlay>
     <Tooltip />
     <OverlayArrow />
</Overlay>

In order to properly display the arrow, we are passing a borderOffset to the overlay, which add a transparent border bottom matching the arrow's height. This ensures that the tooltip is well positionned above the arrow.

When mouseLeave on the trigger occurs, we check if the new element that is mouse hovered is not the overlay. If its not the overlay we close the popup. If it's the overlay, we simply ignore the mouseLeave event, since the tooltip has a way of closing itself on mouseLeave

The error occurs when we mouseLeave the transparent border in the overlay. The trigger doesnt close the popup because the overlay handles it, however its only the Tooltip that has the mouseLeave event, not the overlay. So that 10px window causes the tooltip to stay open

alexasselin008 commented 1 year ago

Issue is still present after the latest fix. Will need to investigate directly in Teams Management's codebase

patricklafrance commented 1 year ago

An issue related to virtualization? 😆