Tooltip reappears without hover after tab switch

[joshjcarrier]

Environment Information

• Package version(s): 6.164.8/office-ui-fabric-react.min.js
• Browser and OS versions: Microsoft Edge (Chromium) Version 84.0.516.1 (Official build) Dev (64-bit)

Please provide a reproduction of the bug in a codepen:

1. Click on [Hover over me] button on Fluent UI docs. Button gains focus but tooltip dismisses when mouse is moved away.
2. Click to switch to another tab
3. Click to switch back to docs tab

Actual behavior:

Tooltip appears without mouse hover.

Expected behavior:

Tooltip should not appear.

[paulgildea]

@joshjcarrier Thanks for GIF! Super helpful! We'll take a look at this.

[jdhuntington]

This happens because TooltipHost defines onFocusCapture, which is invoked whenever an element is gains focus. As clicking causes the button to retain focus, this explains the tooltip reappearing when the page is brought back into view.

A possible workaround would be to forcefully defocus the button when the page itself loses focus, though that would likely need to be done app-side as we probably don't want that logic in the tooltip itself.

@micahgodbolt - any other thoughts?

[BrendanMcK]

Hi @jdhuntington - I'm not sure it's reasonable to say that this is By design. The fact that this behavior can be explained in terms of the current implementation doesn't mean that this is the desired behavior.

forcefully defocus the button when the page itself loses focus

Hard no on this option, that would introduce major accessibility issues.

My take on this is that expected behavior is that the tooltip appears only when focus initially moves into that element while on the same page. As keyboard user, I don't expect switching tabs to be considered equivalent to tabbing into that element.

[micahgodbolt]

@BrendanMcK do you know if it's possible for the browser to differentiate a tab to focus vs 'browser tab' to focus? If we can test and identify the source, then we can certainly look at changing it.

[BrendanMcK]

One of our focus utilities needed to ignore blur events due to tabs becoming inactive - we only want real blurs. In that specific case, the tell was that despite the element getting a blur, it was still returned as document.activeElement. Not sure if that would work here, or if it can be used to do similar to determine whether a focus is a real focus or a 'restore' focus.

[joshjcarrier]

Looks like visibilitychange determines if the tab gained/lost focus.

Alternatively, could onFocusCapture determine the source like react-northstar/Tooltip?

[joshjcarrier]

Here's a codepen to help demo @BrendanMcK 's suggested use of document.activeElement

code | example

[micahgodbolt]

@joshjcarrier haven't dug into it too much, but is your suggestion something we can do at the control level, or is this an app level change? If it's at the control level I can open the issue back up.

[joshjcarrier]

I believe TooltipHost can handle it on its onFocusCapture handler.

[msft-github-bot]

Because this issue is marked as by design and has not had activity for over 3 days, we're automatically closing it for house-keeping purposes.

[joshjcarrier]

@micahgodbolt did we intend for the bot to close this?

[micahgodbolt]

The 'by design' tag told the bot to close it. I removed the tag.

[rachitpuri95]

is there a workaround for this?

[sivapalaniappan]

I am seeing this as well. Is there a fix or workaround for this one ?

[msft-fluent-ui-bot]

🎉This issue was addressed in #18884, which has now been successfully released as @fluentui/theme-samples@v8.1.38.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉This issue was addressed in #18884, which has now been successfully released as @fluentui/react@v8.23.3.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉This issue was addressed in #18884, which has now been successfully released as @fluentui/react-experiments@v8.1.41.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉This issue was addressed in #18884, which has now been successfully released as @fluentui/react-date-time@v8.1.38.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉This issue was addressed in #18884, which has now been successfully released as @fluentui/react-toggle@v1.0.0-beta.124.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉This issue was addressed in #18884, which has now been successfully released as @fluentui/react-tabs@v1.0.0-beta.126.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉This issue was addressed in #18884, which has now been successfully released as @fluentui/react-charting@v5.3.10.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉This issue was addressed in #18884, which has now been successfully released as @fluentui/react-monaco-editor@v1.1.38.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉This issue was addressed in #18884, which has now been successfully released as @fluentui/azure-themes@v8.1.38.:tada:

Handy links:

• Release Notes
• Official NPM Release