diff --git a/change/@fluentui-react-e175b02f-9a97-4775-81a2-30f594f3ae69.json b/change/@fluentui-react-e175b02f-9a97-4775-81a2-30f594f3ae69.json new file mode 100644 index 00000000000000..6f9ac9fcda5526 --- /dev/null +++ b/change/@fluentui-react-e175b02f-9a97-4775-81a2-30f594f3ae69.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Prevent tooltip from showing on tab switch for the focused element", + "packageName": "@fluentui/react", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/Tooltip/TooltipHost.base.tsx b/packages/react/src/components/Tooltip/TooltipHost.base.tsx index 182c93583324a2..6432ba46cf6be8 100644 --- a/packages/react/src/components/Tooltip/TooltipHost.base.tsx +++ b/packages/react/src/components/Tooltip/TooltipHost.base.tsx @@ -44,6 +44,7 @@ export class TooltipHostBase extends React.Component) => { + if (this._ignoreNextFocusEvent) { + this._ignoreNextFocusEvent = false; + return; + } + + this._onTooltipMouseEnter(ev); + }; + + private _onTooltipBlur = (ev: React.FocusEvent) => { + // The focused element gets a blur event when the document loses focus + // (e.g. switching tabs in the browser), but we don't want to show the + // tooltip again when the document gets focus back. Handle this case by + // checking if the blurred element is still the document's activeElement, + // and ignoring when it next gets focus back. + // See https://github.com/microsoft/fluentui/issues/13541 + this._ignoreNextFocusEvent = document?.activeElement === ev.target; + + this._hideTooltip(); + }; + // Show Tooltip private _onTooltipMouseEnter = (ev: any): void => { const { overflowMode, delay } = this.props;