fix: get computed style error (#1433)

src/autocapture-utils.ts

@@ -82,6 +82,18 @@ export function getSafeText(el: Element): string {
     return trim(elText)
 }
 
+export function getEventTarget(e: Event): Element | null {
+    // https://developer.mozilla.org/en-US/docs/Web/API/Event/target#Compatibility_notes
+    if (isUndefined(e.target)) {
+        return (e.srcElement as Element) || null
+    } else {
+        if ((e.target as HTMLElement)?.shadowRoot) {
+            return (e.composedPath()[0] as Element) || null
+        }
+        return (e.target as Element) || null
+    }
+}
+
 /*
  * Check whether an element has nodeType Node.ELEMENT_NODE
  * @param {Element} el - element to check

src/autocapture.ts

@@ -4,6 +4,7 @@ import {
     getClassNames,
     getDirectAndNestedSpanText,
     getElementsChainString,
+    getEventTarget,
     getSafeText,
     isAngularStyleAttr,
     isDocumentFragment,
@@ -22,7 +23,7 @@ import { AutocaptureConfig, DecideResponse, Properties } from './types'
 import { PostHog } from './posthog-core'
 import { AUTOCAPTURE_DISABLED_SERVER_SIDE } from './constants'
 
-import { isBoolean, isFunction, isNull, isObject, isUndefined } from './utils/type-utils'
+import { isBoolean, isFunction, isNull, isObject } from './utils/type-utils'
 import { logger } from './utils/logger'
 import { document, window } from './utils/globals'
 import { convertToURL } from './utils/request-utils'
@@ -243,25 +244,13 @@ export class Autocapture {
         }
     }
 
-    private _getEventTarget(e: Event): Element | null {
-        // https://developer.mozilla.org/en-US/docs/Web/API/Event/target#Compatibility_notes
-        if (isUndefined(e.target)) {
-            return (e.srcElement as Element) || null
-        } else {
-            if ((e.target as HTMLElement)?.shadowRoot) {
-                return (e.composedPath()[0] as Element) || null
-            }
-            return (e.target as Element) || null
-        }
-    }
-
     private _captureEvent(e: Event, eventName = '$autocapture'): boolean | void {
         if (!this.isEnabled) {
             return
         }
 
         /*** Don't mess with this code without running IE8 tests on it ***/
-        let target = this._getEventTarget(e)
+        let target = getEventTarget(e)
         if (isTextNode(target)) {
             // defeat Safari bug (see: http://www.quirksmode.org/js/events_properties.html)
             target = (target.parentNode || null) as Element | null

src/heatmaps.ts

@@ -4,7 +4,7 @@ import { DecideResponse, Properties } from './types'
 import { PostHog } from './posthog-core'
 
 import { document, window } from './utils/globals'
-import { getParentElement, isTag } from './autocapture-utils'
+import { getEventTarget, getParentElement, isElementNode, isTag } from './autocapture-utils'
 import { HEATMAPS_ENABLED_SERVER_SIDE, TOOLBAR_ID } from './constants'
 import { isEmptyObject, isObject, isUndefined } from './utils/type-utils'
 import { logger } from './utils/logger'
@@ -19,10 +19,10 @@ type HeatmapEventBuffer =
       }
     | undefined
 
-function elementOrParentPositionMatches(el: Element, matches: string[], breakOnElement?: Element): boolean {
-    let curEl: Element | false = el
+function elementOrParentPositionMatches(el: Element | null, matches: string[], breakOnElement?: Element): boolean {
+    let curEl: Element | null | false = el
 
-    while (curEl && !isTag(curEl, 'body')) {
+    while (curEl && isElementNode(curEl) && !isTag(curEl, 'body')) {
         if (curEl === breakOnElement) {
             return false
         }
@@ -139,7 +139,7 @@ export class Heatmaps {
         const scrollX = this.instance.scrollManager.scrollX()
         const scrollElement = this.instance.scrollManager.scrollElement()
 
-        const isFixedOrSticky = elementOrParentPositionMatches(e.target as Element, ['fixed', 'sticky'], scrollElement)
+        const isFixedOrSticky = elementOrParentPositionMatches(getEventTarget(e), ['fixed', 'sticky'], scrollElement)
 
         return {
             x: e.clientX + (isFixedOrSticky ? 0 : scrollX),