fix: Don't track heatmaps of toolbar (#1152)

PostHog · Apr 24, 2024 · 221f4b1 · 221f4b1
1 parent e49ed4a
commit 221f4b1
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/src/__tests__/heatmaps.test.ts b/src/__tests__/heatmaps.test.ts
@@ -7,17 +7,11 @@ describe('heatmaps', () => {
     let posthog: PostHog
     let onCapture = jest.fn()
 
-    const mockClickEvent = {
-        target: document.body,
-        clientX: 10,
-        clientY: 20,
-    } as unknown as MouseEvent
-
     const createMockMouseEvent = (props: Partial<MouseEvent> = {}) =>
         ({
             target: document.body,
             clientX: 10,
-            clientY: 10,
+            clientY: 20,
             ...props,
         } as unknown as MouseEvent)
 
@@ -27,7 +21,7 @@ describe('heatmaps', () => {
     })
 
     it('should include generated heatmap data', async () => {
-        posthog.heatmaps?.['_onClick']?.(mockClickEvent as MouseEvent)
+        posthog.heatmaps?.['_onClick']?.(createMockMouseEvent())
         posthog.capture('test event')
 
         expect(onCapture).toBeCalledTimes(1)
@@ -88,4 +82,27 @@ describe('heatmaps', () => {
         expect(onCapture.mock.lastCall).toMatchObject(['$snapshot', {}])
         expect(onCapture.mock.lastCall[1].properties).not.toHaveProperty('$heatmap_data')
     })
+
+    it('should ignore clicks if they come from the toolbar', async () => {
+        posthog.heatmaps?.['_onClick']?.(
+            createMockMouseEvent({
+                target: { id: '__POSTHOG_TOOLBAR__' } as Element,
+            })
+        )
+        expect(posthog.heatmaps?.['buffer']).toEqual(undefined)
+
+        posthog.heatmaps?.['_onClick']?.(
+            createMockMouseEvent({
+                target: { closest: () => ({}) } as unknown as Element,
+            })
+        )
+        expect(posthog.heatmaps?.['buffer']).toEqual(undefined)
+
+        posthog.heatmaps?.['_onClick']?.(
+            createMockMouseEvent({
+                target: document.body,
+            })
+        )
+        expect(posthog.heatmaps?.['buffer']).not.toEqual(undefined)
+    })
 })
diff --git a/src/heatmaps.ts b/src/heatmaps.ts
@@ -30,6 +30,13 @@ function elementOrParentPositionMatches(el: Element, matches: string[], breakOnE
     return false
 }
 
+const TOOLBAR_ID = '__POSTHOG_TOOLBAR__'
+
+function elementInToolbar(el: Element): boolean {
+    // NOTE: .closest is not supported in IE11 hence the operator check
+    return el.id === TOOLBAR_ID || !!el.closest?.('#__POSTHOG_TOOLBAR__')
+}
+
 export class Heatmaps {
     instance: PostHog
     rageclicks = new RageClick()
@@ -91,6 +98,9 @@ export class Heatmaps {
     }
 
     private _onClick(e: MouseEvent): void {
+        if (elementInToolbar(e.target as Element)) {
+            return
+        }
         const properties = this._getProperties(e, 'click')
 
         if (this.rageclicks?.isRageClick(e.clientX, e.clientY, new Date().getTime())) {
@@ -106,6 +116,9 @@ export class Heatmaps {
     }
 
     private _onMouseMove(e: Event): void {
+        if (elementInToolbar(e.target as Element)) {
+            return
+        }
         clearTimeout(this._mouseMoveTimeout)
 
         this._mouseMoveTimeout = setTimeout(() => {