diff --git a/src/__tests__/heatmaps.test.ts b/src/__tests__/heatmaps.test.ts index d7083d8ca..9432dbde1 100644 --- 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 = {}) => ({ 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 index 3fdd55d67..ecb645a2f 100644 --- 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(() => {