fix: Don't track heatmaps of toolbar

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)
+    })
 })

src/heatmaps.ts

@@ -30,6 +30,12 @@ function elementOrParentPositionMatches(el: Element, matches: string[], breakOnE
     return false
 }
 
+const TOOLBAR_ID = '__POSTHOG_TOOLBAR__'
+
+function elementInToolbar(el: Element): boolean {
+    return el.id === TOOLBAR_ID || !!el.closest('#__POSTHOG_TOOLBAR__')
+}
+
 export class Heatmaps {
     instance: PostHog
     rageclicks = new RageClick()
@@ -91,6 +97,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 +115,9 @@ export class Heatmaps {
     }
 
     private _onMouseMove(e: Event): void {
+        if (elementInToolbar(e.target as Element)) {
+            return
+        }
         clearTimeout(this._mouseMoveTimeout)
 
         this._mouseMoveTimeout = setTimeout(() => {