Revert "When PopOverButton popover opens, close tooltip on the same element" (#7941)

Author: deleonio

packages/components/src/components/button/component.tsx

@@ -67,22 +67,19 @@ import clsx from 'clsx';
 export class KolButtonWc implements InternalButtonAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolButtonWcElement;
 	private buttonRef?: HTMLButtonElement;
-	private tooltipRef?: HTMLKolTooltipWcElement;
 
 	private readonly internalDescriptionById = nonce();
 
+	private readonly catchRef = (ref?: HTMLButtonElement) => {
+		this.buttonRef = ref;
+	};
+
 	@Method()
 	// eslint-disable-next-line @typescript-eslint/require-await
 	public async kolFocus() {
 		this.buttonRef?.focus();
 	}
 
-	@Method()
-	// eslint-disable-next-line @typescript-eslint/require-await
-	public async hideTooltip() {
-		void this.tooltipRef?.hideTooltip();
-	}
-
 	private readonly onClick = (event: MouseEvent) => {
 		if (this.state._type === 'submit') {
 			propagateSubmitEventToForm({
@@ -125,7 +122,7 @@ export class KolButtonWc implements InternalButtonAPI, FocusableElement {
 		return (
 			<Host>
 				<button
-					ref={(ref) => (this.buttonRef = ref)}
+					ref={this.catchRef}
 					accessKey={this.state._accessKey || undefined}
 					aria-controls={this.state._ariaControls}
 					aria-describedby={hasAriaDescription ? this.internalDescriptionById : undefined}
@@ -161,7 +158,6 @@ export class KolButtonWc implements InternalButtonAPI, FocusableElement {
 					</KolSpanFc>
 				</button>
 				<KolTooltipWcTag
-					ref={(ref) => (this.tooltipRef = ref)}
 					/**
 					 * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,
 					 * verhindert aber nicht das Aria-Labelledby vorgelesen wird.

packages/components/src/components/popover-button/component.tsx

@@ -60,15 +60,11 @@ export class KolPopoverButton implements PopoverButtonProps {
 				// Reset the flag after the event loop tick.
 				this.justClosed = false;
 			}, 10); // timeout of 0 should be sufficient but doesn't work in Safari Mobile (needs further investigation).
-		} else {
-			if (this.refPopover) {
-				/**
-				 * Avoid "flicker" by hiding the element until the position is set in the `toggle` event handler. `alignFloatingElements` is responsible for setting the visibility back to 'visible'.
-				 */
-				this.refPopover.style.visibility = 'hidden';
-			}
-
-			void this.refButton?.hideTooltip();
+		} else if (this.refPopover) {
+			/**
+			 * Avoid "flicker" by hiding the element until the position is set in the `toggle` event handler. `alignFloatingElements` is responsible for setting the visibility back to 'visible'.
+			 */
+			this.refPopover.style.visibility = 'hidden';
 		}
 	}
 

packages/components/src/components/popover-button/popover-button.e2e.ts

@@ -37,20 +37,4 @@ test.describe('kol-popover-button', () => {
 		await button.click({ force: true });
 		await expect(popover).not.toBeVisible();
 	});
-
-	test('should hide its tooltip when popover is shown', async ({ page }) => {
-		await page.setContent(`
-			<kol-popover-button _label="Toggle popover" _icons="codicon codicon-info" _hide-label>
-				Popover content
-			</kol-popover-button>
-		`);
-		const button = page.getByTestId('popover-button').locator('button');
-		const tooltip = page.locator('kol-tooltip-wc');
-
-		await button.hover();
-		await expect(tooltip).toBeVisible();
-
-		await button.click();
-		await expect(tooltip).not.toBeVisible();
-	});
 });

packages/components/src/components/tooltip/component.tsx

@@ -2,16 +2,12 @@ import { autoUpdate } from '@floating-ui/dom';
 import type { AlignPropType, BadgeTextPropType, IdPropType, LabelPropType, TooltipAPI, TooltipStates } from '../../schema';
 import { getDocument, validateBadgeText, validateAlign, validateId, validateLabel } from '../../schema';
 import type { JSX } from '@stencil/core';
-import { Method } from '@stencil/core';
 import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { alignFloatingElements } from '../../utils/align-floating-elements';
 import { hideOverlay, showOverlay } from '../../utils/overlay';
 import { KolSpanFc } from '../../functional-components';
 
-// Timing Guidelines for Exposing Hidden Content: https://www.nngroup.com/articles/timing-exposing-content/
-const TOOLTIP_DELAY = 300;
-
 /**
  * @internal
  */
@@ -25,6 +21,8 @@ export class KolTooltipWc implements TooltipAPI {
 	private arrowElement?: HTMLDivElement;
 	private previousSibling?: Element | null;
 	private tooltipElement?: HTMLDivElement;
+	private hasFocusIn = false;
+	private hasMouseIn = false;
 
 	private cleanupAutoPositioning?: () => void;
 
@@ -53,26 +51,7 @@ export class KolTooltipWc implements TooltipAPI {
 		}
 	};
 
-	private showTooltipTimeout?: ReturnType<typeof setTimeout>;
-	private showTooltipWithDelay = (): void => {
-		clearTimeout(this.showTooltipTimeout);
-		this.showTooltipTimeout = setTimeout(() => {
-			this.showTooltip();
-		}, TOOLTIP_DELAY);
-	};
-
-	private hideTooltipTimeout?: ReturnType<typeof setTimeout>;
-	private hideTooltipWithDelay = (): void => {
-		clearTimeout(this.hideTooltipTimeout);
-		this.hideTooltipTimeout = setTimeout(() => {
-			void this.hideTooltip();
-		}, TOOLTIP_DELAY);
-	};
-
-	@Method()
-	// eslint-disable-next-line @typescript-eslint/require-await
-	public async hideTooltip() {
-		clearTimeout(this.showTooltipTimeout); // Cancel scheduled tooltips
+	private hideTooltip = (): void => {
 		if (this.tooltipElement /* SSR instanceof HTMLElement */) {
 			hideOverlay(this.tooltipElement);
 			this.tooltipElement.style.setProperty('display', 'none');
@@ -83,25 +62,29 @@ export class KolTooltipWc implements TooltipAPI {
 			}
 		}
 		getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
-	}
+	};
 
 	private hideTooltipByEscape = (event: KeyboardEvent): void => {
 		if (event.key === 'Escape') {
-			void this.hideTooltip();
+			this.hideTooltip();
 		}
 	};
 
 	private handleMouseEnter() {
-		this.showTooltipWithDelay();
+		this.hasMouseIn = true;
+		this.showOrHideTooltip();
 	}
 	private handleMouseleave() {
-		this.hideTooltipWithDelay();
+		this.hasMouseIn = false;
+		this.showOrHideTooltip();
 	}
 	private handleFocusIn() {
-		this.showTooltipWithDelay();
+		this.hasFocusIn = true;
+		this.showOrHideTooltip();
 	}
 	private handleFocusout() {
-		this.hideTooltipWithDelay();
+		this.hasFocusIn = false;
+		this.showOrHideTooltip();
 	}
 
 	private addListeners = (el: Element): void => {
@@ -200,6 +183,20 @@ export class KolTooltipWc implements TooltipAPI {
 		});
 	}
 
+	private overFocusTimeout?: ReturnType<typeof setTimeout>;
+
+	private showOrHideTooltip = (): void => {
+		clearTimeout(this.overFocusTimeout);
+		this.overFocusTimeout = setTimeout(() => {
+			if (this.hasMouseIn || this.hasFocusIn) {
+				this.showTooltip();
+			} else {
+				this.hideTooltip();
+			}
+			// Timing Guidelines for Exposing Hidden Content: https://www.nngroup.com/articles/timing-exposing-content/
+		}, 300);
+	};
+
 	public componentWillLoad(): void {
 		this.validateBadgeText(this._badgeText);
 		this.validateAlign(this._align);