fix(core/tooltip): destroy auto update cycle before starting a new one (

#1374) Co-authored-by: Lukas Maurer <[email protected]> Co-authored-by: AndreasBerliner <[email protected]>
siemens · Jul 16, 2024 · f57e82f · f57e82f
1 parent 24a9514
commit f57e82f
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 16 deletions.
diff --git a/.changeset/shaggy-apricots-prove.md 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
@@ -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
@@ -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<HTMLElement>;
+        "for"?: string | HTMLElement | Promise<HTMLElement>;
         "hideDelay": number;
         "hideTooltip": () => Promise<void>;
         /**
@@ -2271,11 +2273,11 @@ export namespace Components {
          */
         "placement": 'top' | 'right' | 'bottom' | 'left';
         "showDelay": number;
-        "showTooltip": (anchorElement: any) => Promise<void>;
+        "showTooltip": (anchorElement: Element) => Promise<void>;
         /**
           * 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
@@ -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<HTMLElement>;
+  @Prop() for?: string | HTMLElement | Promise<HTMLElement>;
 
   /**
    * 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<ComputePositionReturn>((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
@@ -1,5 +1,5 @@
 {
-  "name": "ix-angular-example",
+  "name": "ix-react-example",
   "version": "0.1.0",
   "private": true,
   "dependencies": {