From f57e82fcf3d643cb966db7da54508e0d622a0b86 Mon Sep 17 00:00:00 2001 From: matthiashader <144090716+matthiashader@users.noreply.github.com> Date: Tue, 16 Jul 2024 15:57:26 +0200 Subject: [PATCH] fix(core/tooltip): destroy auto update cycle before starting a new one (#1374) Co-authored-by: Lukas Maurer Co-authored-by: AndreasBerliner <41509230+AndreasBerliner@users.noreply.github.com> --- .changeset/shaggy-apricots-prove.md | 5 +++++ packages/core/component-doc.json | 4 ++-- packages/core/src/components.d.ts | 8 +++++--- .../core/src/components/tooltip/tooltip.tsx | 20 +++++++++---------- .../static/code-runtime/react/package.json | 2 +- 5 files changed, 23 insertions(+), 16 deletions(-) create mode 100644 .changeset/shaggy-apricots-prove.md diff --git a/.changeset/shaggy-apricots-prove.md b/.changeset/shaggy-apricots-prove.md new file mode 100644 index 0000000000..486741cb35 --- /dev/null +++ b/.changeset/shaggy-apricots-prove.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": patch +--- + +fix(core/tooltip): destroy auto update cycle before starting a new one diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 2d649befe0..763547fe14 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -16039,7 +16039,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -16122,7 +16122,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false } ], diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 243ecd540f..2917109392 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -42,6 +42,7 @@ import { TabClickDetail } from "./components/tab-item/tab-item"; import { TimePickerCorners } from "./components/time-picker/time-picker"; import { ToastConfig, ToastType } from "./components/toast/toast-utils"; import { ShowToastResult } from "./components/toast/toast-container"; +import { Element } from "@stencil/core"; import { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model"; import { TextDecoration, TypographyColors, TypographyFormat, TypographyVariants } from "./components/typography/typography"; import { UploadFileState } from "./components/upload/upload-file-state"; @@ -82,6 +83,7 @@ export { TabClickDetail } from "./components/tab-item/tab-item"; export { TimePickerCorners } from "./components/time-picker/time-picker"; export { ToastConfig, ToastType } from "./components/toast/toast-utils"; export { ShowToastResult } from "./components/toast/toast-container"; +export { Element } from "@stencil/core"; export { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model"; export { TextDecoration, TypographyColors, TypographyFormat, TypographyVariants } from "./components/typography/typography"; export { UploadFileState } from "./components/upload/upload-file-state"; @@ -2258,7 +2260,7 @@ export namespace Components { /** * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"` */ - "for": string | HTMLElement | Promise; + "for"?: string | HTMLElement | Promise; "hideDelay": number; "hideTooltip": () => Promise; /** @@ -2271,11 +2273,11 @@ export namespace Components { */ "placement": 'top' | 'right' | 'bottom' | 'left'; "showDelay": number; - "showTooltip": (anchorElement: any) => Promise; + "showTooltip": (anchorElement: Element) => Promise; /** * Title of the tooltip */ - "titleContent": string; + "titleContent"?: string; } interface IxTree { /** diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx index 5ad2f235af..41ca4b261c 100644 --- a/packages/core/src/components/tooltip/tooltip.tsx +++ b/packages/core/src/components/tooltip/tooltip.tsx @@ -51,12 +51,12 @@ export class Tooltip implements IxOverlayComponent { /** * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"` */ - @Prop() for: string | HTMLElement | Promise; + @Prop() for?: string | HTMLElement | Promise; /** * Title of the tooltip */ - @Prop() titleContent: string; + @Prop() titleContent?: string; /** * Define if the user can access the tooltip via mouse. @@ -82,13 +82,13 @@ export class Tooltip implements IxOverlayComponent { @State() visible = false; - @Element() hostElement: HTMLIxTooltipElement; + @Element() hostElement!: HTMLIxTooltipElement; - private observer: MutationObserver; - private hideTooltipTimeout: NodeJS.Timeout; - private showTooltipTimeout: NodeJS.Timeout; + private observer?: MutationObserver; + private hideTooltipTimeout?: NodeJS.Timeout; + private showTooltipTimeout?: NodeJS.Timeout; private disposeAutoUpdate?: () => void; - private disposeListener: () => void; + private disposeListener?: () => void; private get arrowElement(): HTMLElement { return this.hostElement.shadowRoot.querySelector('.arrow'); @@ -102,7 +102,7 @@ export class Tooltip implements IxOverlayComponent { /** @internal */ @Method() - async showTooltip(anchorElement: any) { + async showTooltip(anchorElement: Element) { clearTimeout(this.hideTooltipTimeout); await this.applyTooltipPosition(anchorElement); @@ -166,7 +166,7 @@ export class Tooltip implements IxOverlayComponent { } private async computeTooltipPosition(target: Element) { - const computeResponse = await computePosition(target, this.hostElement, { + return computePosition(target, this.hostElement, { strategy: 'fixed', placement: this.placement, middleware: [ @@ -181,7 +181,6 @@ export class Tooltip implements IxOverlayComponent { }), ], }); - return computeResponse; } private applyTooltipArrowPosition(computeResponse: ComputePositionReturn) { @@ -195,6 +194,7 @@ export class Tooltip implements IxOverlayComponent { } return new Promise((resolve) => { + this.destroyAutoUpdate(); this.disposeAutoUpdate = autoUpdate( target, this.hostElement, diff --git a/packages/documentation/static/code-runtime/react/package.json b/packages/documentation/static/code-runtime/react/package.json index 17303a8417..a233e79f09 100644 --- a/packages/documentation/static/code-runtime/react/package.json +++ b/packages/documentation/static/code-runtime/react/package.json @@ -1,5 +1,5 @@ { - "name": "ix-angular-example", + "name": "ix-react-example", "version": "0.1.0", "private": true, "dependencies": {