Coach Mark: Fix react component positioning (#638)

* fix: ensure that react coach mark component is positioned correctly * chore: commit changeset --------- Co-authored-by: Dane Hillard <[email protected]>
ithaka · Oct 19, 2023 · 29fdb15 · 29fdb15
1 parent ee7a68c
commit 29fdb15
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/.changeset/silver-pugs-share.md b/.changeset/silver-pugs-share.md
@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Fix positioning of coach mark react component
diff --git a/packages/pharos/src/components/coach-mark/pharos-coach-mark.ts b/packages/pharos/src/components/coach-mark/pharos-coach-mark.ts
@@ -88,30 +88,30 @@ export class PharosCoachMark extends ScopedRegistryMixin(PharosElement) {
 
   override connectedCallback() {
     super.connectedCallback();
-    this.setOffset();
+
+    autoUpdate(document.documentElement, this, () => this.requestUpdate());
   }
 
   private setOffset() {
     const id: string = this.getAttribute('id') || '';
     const targetElement: Element | null = document.querySelector(`[data-coach-mark="${id}"]`);
     if (!targetElement) return;
 
-    this._cleanup = autoUpdate(targetElement, this, () =>
-      computePosition(targetElement, this, {
-        placement: this.alignment === 'center' ? this.side : `${this.side}-${this.alignment}`,
-        middleware: [flip(), offset(20)],
-      }).then(({ x, y, placement }) => {
-        Object.assign(this.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        });
-        this._computedSide = placement.toString().split('-')[0]; // Removes -start or -end from final placement
-        this.requestUpdate();
-      })
-    );
+    computePosition(targetElement, this, {
+      placement: this.alignment === 'center' ? this.side : `${this.side}-${this.alignment}`,
+      middleware: [flip(), offset(20)],
+    }).then(({ x, y, placement }) => {
+      Object.assign(this.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+      this._computedSide = placement.toString().split('-')[0]; // Removes -start or -end from final placement
+    });
   }
 
   protected override render(): TemplateResult {
+    this.setOffset();
+
     return html`
       <div
         class="coach-mark ${this.delay && this.delay !== 'none' ? `delay-${this.delay}` : ''}"