Skip to content

Commit

Permalink
fix(tooltip): closed tooltips should not reappear (#10420)
Browse files Browse the repository at this point in the history
**Related Issue:** #10416

## Summary

- track clicked tooltip to stop hovering until the tooltip is hovered
off of
- add e2e test
  • Loading branch information
driskull authored Sep 27, 2024
1 parent 737085a commit a2f3925
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 48 deletions.
96 changes: 48 additions & 48 deletions packages/calcite-components/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -393,10 +393,6 @@ export namespace Components {
* When `true`, the component is expanded.
*/
"expanded": boolean;
/**
* Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
*/
"flipPlacements": FlipPlacement[];
/**
* Accessible name for the component.
*/
Expand All @@ -406,10 +402,18 @@ export namespace Components {
* @deprecated Use the `layout` property on the component's parent instead.
*/
"layout": Extract<"horizontal" | "vertical" | "grid", Layout>;
/**
* Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
*/
"menuFlipPlacements": FlipPlacement[];
/**
* When `true`, the `calcite-action-menu` is open.
*/
"menuOpen": boolean;
/**
* Determines where the action menu will be positioned.
*/
"menuPlacement": LogicalPlacement;
/**
* Use this property to override individual strings used by the component.
*/
Expand All @@ -422,10 +426,6 @@ export namespace Components {
* Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
*/
"overlayPositioning": OverlayPositioning;
/**
* Determines where the action menu will be positioned.
*/
"placement": LogicalPlacement;
/**
* Specifies the size of the `calcite-action-menu`.
*/
Expand Down Expand Up @@ -632,10 +632,6 @@ export namespace Components {
* When `true`, displays a drag handle in the header.
*/
"dragHandle": boolean;
/**
* Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
*/
"flipPlacements": FlipPlacement[];
/**
* The component header text.
*/
Expand All @@ -660,6 +656,14 @@ export namespace Components {
* When `true`, a busy indicator is displayed.
*/
"loading": boolean;
/**
* Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
*/
"menuFlipPlacements": FlipPlacement[];
/**
* Determines where the action menu will be positioned.
*/
"menuPlacement": LogicalPlacement;
/**
* Use this property to override individual strings used by the component.
*/
Expand All @@ -676,10 +680,6 @@ export namespace Components {
* Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
*/
"overlayPositioning": OverlayPositioning;
/**
* Determines where the action menu will be positioned.
*/
"placement": LogicalPlacement;
/**
* Sets focus on the component's first tabbable element.
*/
Expand Down Expand Up @@ -3880,10 +3880,6 @@ export namespace Components {
* When `true`, interaction is prevented and the component is displayed with lower opacity.
*/
"disabled": boolean;
/**
* Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
*/
"flipPlacements": FlipPlacement[];
/**
* The component header text.
*/
Expand All @@ -3896,10 +3892,18 @@ export namespace Components {
* When `true`, a busy indicator is displayed.
*/
"loading": boolean;
/**
* Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
*/
"menuFlipPlacements": FlipPlacement[];
/**
* When `true`, the action menu items in the `header-menu-actions` slot are open.
*/
"menuOpen": boolean;
/**
* Determines where the action menu will be positioned.
*/
"menuPlacement": LogicalPlacement;
/**
* Use this property to override individual strings used by the component.
*/
Expand All @@ -3912,10 +3916,6 @@ export namespace Components {
* Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
*/
"overlayPositioning": OverlayPositioning;
/**
* Determines where the action menu will be positioned.
*/
"placement": LogicalPlacement;
/**
* Specifies the size of the component.
*/
Expand Down Expand Up @@ -8349,10 +8349,6 @@ declare namespace LocalJSX {
* When `true`, the component is expanded.
*/
"expanded"?: boolean;
/**
* Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
*/
"flipPlacements"?: FlipPlacement[];
/**
* Accessible name for the component.
*/
Expand All @@ -8362,10 +8358,18 @@ declare namespace LocalJSX {
* @deprecated Use the `layout` property on the component's parent instead.
*/
"layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>;
/**
* Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
*/
"menuFlipPlacements"?: FlipPlacement[];
/**
* When `true`, the `calcite-action-menu` is open.
*/
"menuOpen"?: boolean;
/**
* Determines where the action menu will be positioned.
*/
"menuPlacement"?: LogicalPlacement;
/**
* Use this property to override individual strings used by the component.
*/
Expand All @@ -8378,10 +8382,6 @@ declare namespace LocalJSX {
* Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
*/
"overlayPositioning"?: OverlayPositioning;
/**
* Determines where the action menu will be positioned.
*/
"placement"?: LogicalPlacement;
/**
* Specifies the size of the `calcite-action-menu`.
*/
Expand Down Expand Up @@ -8595,10 +8595,6 @@ declare namespace LocalJSX {
* When `true`, displays a drag handle in the header.
*/
"dragHandle"?: boolean;
/**
* Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
*/
"flipPlacements"?: FlipPlacement[];
/**
* The component header text.
*/
Expand All @@ -8623,6 +8619,14 @@ declare namespace LocalJSX {
* When `true`, a busy indicator is displayed.
*/
"loading"?: boolean;
/**
* Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
*/
"menuFlipPlacements"?: FlipPlacement[];
/**
* Determines where the action menu will be positioned.
*/
"menuPlacement"?: LogicalPlacement;
/**
* Use this property to override individual strings used by the component.
*/
Expand Down Expand Up @@ -8660,10 +8664,6 @@ declare namespace LocalJSX {
* Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
*/
"overlayPositioning"?: OverlayPositioning;
/**
* Determines where the action menu will be positioned.
*/
"placement"?: LogicalPlacement;
/**
* Displays a status-related indicator icon.
* @deprecated Use `icon-start` instead.
Expand Down Expand Up @@ -12032,10 +12032,6 @@ declare namespace LocalJSX {
* When `true`, interaction is prevented and the component is displayed with lower opacity.
*/
"disabled"?: boolean;
/**
* Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
*/
"flipPlacements"?: FlipPlacement[];
/**
* The component header text.
*/
Expand All @@ -12048,10 +12044,18 @@ declare namespace LocalJSX {
* When `true`, a busy indicator is displayed.
*/
"loading"?: boolean;
/**
* Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
*/
"menuFlipPlacements"?: FlipPlacement[];
/**
* When `true`, the action menu items in the `header-menu-actions` slot are open.
*/
"menuOpen"?: boolean;
/**
* Determines where the action menu will be positioned.
*/
"menuPlacement"?: LogicalPlacement;
/**
* Use this property to override individual strings used by the component.
*/
Expand All @@ -12076,10 +12080,6 @@ declare namespace LocalJSX {
* Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
*/
"overlayPositioning"?: OverlayPositioning;
/**
* Determines where the action menu will be positioned.
*/
"placement"?: LogicalPlacement;
/**
* Specifies the size of the component.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ export default class TooltipManager {

private registeredElementCount = 0;

private clickedTooltip: HTMLCalciteTooltipElement = null;

// --------------------------------------------------------------------------
//
// Public Methods
Expand Down Expand Up @@ -100,11 +102,17 @@ export default class TooltipManager {
return;
}

if (tooltip === this.clickedTooltip) {
return;
}

if (tooltip) {
this.openHoveredTooltip(tooltip);
} else if (activeTooltip?.open) {
this.closeHoveredTooltip();
}

this.clickedTooltip = null;
};

private pathHasOpenTooltip(tooltip: HTMLCalciteTooltipElement, composedPath: EventTarget[]): boolean {
Expand All @@ -116,6 +124,7 @@ export default class TooltipManager {
}

private clickHandler = (event: Event): void => {
this.clickedTooltip = null;
const composedPath = event.composedPath();
const tooltip = this.queryTooltip(composedPath);

Expand All @@ -133,6 +142,7 @@ export default class TooltipManager {
this.clearHoverTimeout();

if (tooltip.closeOnClick) {
this.clickedTooltip = tooltip;
this.toggleTooltip(tooltip, false);
return;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -661,6 +661,14 @@ describe("calcite-tooltip", () => {
await page.waitForChanges();

expect(await tooltip.getProperty("open")).toBe(false);

await referenceElement.hover();

await page.waitForTimeout(TOOLTIP_OPEN_DELAY_MS);

await page.waitForChanges();

expect(await tooltip.getProperty("open")).toBe(false);
});

it("should close tooltip when closeOnClick is true and referenceElement is clicked quickly", async () => {
Expand Down

0 comments on commit a2f3925

Please sign in to comment.