Prevent tooltip from showing on tab switch for the focused element [v…

…8] (#18884)

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.

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/src/components/Tooltip/TooltipHost.base.tsx

@@ -44,6 +44,7 @@ export class TooltipHostBase extends React.Component<ITooltipHostProps, ITooltip
   private _dismissTimerId: number;
   private _openTimerId: number;
   private _defaultTooltipId = getId('tooltip');
+  private _ignoreNextFocusEvent: boolean;
 
   // Constructor
   constructor(props: ITooltipHostProps) {
@@ -93,8 +94,8 @@ export class TooltipHostBase extends React.Component<ITooltipHostProps, ITooltip
       <div
         className={this._classNames.root}
         ref={this._tooltipHost}
-        {...{ onFocusCapture: this._onTooltipMouseEnter }}
-        {...{ onBlurCapture: this._hideTooltip }}
+        {...{ onFocusCapture: this._onTooltipFocus }}
+        {...{ onBlurCapture: this._onTooltipBlur }}
         onMouseEnter={this._onTooltipMouseEnter}
         onMouseLeave={this._onTooltipMouseLeave}
         onKeyDown={this._onTooltipKeyDown}
@@ -166,6 +167,27 @@ export class TooltipHostBase extends React.Component<ITooltipHostProps, ITooltip
     return this._tooltipHost.current;
   };
 
+  private _onTooltipFocus = (ev: React.FocusEvent<HTMLElement>) => {
+    if (this._ignoreNextFocusEvent) {
+      this._ignoreNextFocusEvent = false;
+      return;
+    }
+
+    this._onTooltipMouseEnter(ev);
+  };
+
+  private _onTooltipBlur = (ev: React.FocusEvent<HTMLElement>) => {
+    // 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;