fix: toolbar selector fangling (#20325)

frontend/src/toolbar/elements/Elements.tsx

@@ -2,7 +2,7 @@ import './Elements.scss'
 
 import { useActions, useValues } from 'kea'
 import { compactNumber } from 'lib/utils'
-import React from 'react'
+import { Fragment } from 'react'
 
 import { ElementInfoWindow } from '~/toolbar/elements/ElementInfoWindow'
 import { elementsLogic } from '~/toolbar/elements/elementsLogic'
@@ -75,7 +75,7 @@ export function Elements(): JSX.Element {
 
                 {heatmapElements.map(({ rect, count, clickCount, rageclickCount, element }, index) => {
                     return (
-                        <React.Fragment key={`heatmap-${index}`}>
+                        <Fragment key={`heatmap-${index}`}>
                             <HeatmapElement
                                 rect={rect}
                                 style={{
@@ -155,7 +155,7 @@ export function Elements(): JSX.Element {
                                     {compactNumber(rageclickCount)}&#128545;
                                 </HeatmapLabel>
                             )}
-                        </React.Fragment>
+                        </Fragment>
                     )
                 })}
 

frontend/src/toolbar/utils.ts

@@ -2,7 +2,6 @@ import { finder } from '@medv/finder'
 import { CLICK_TARGET_SELECTOR, CLICK_TARGETS, escapeRegex, TAGS_TO_IGNORE } from 'lib/actionUtils'
 import { cssEscape } from 'lib/utils/cssEscape'
 import { querySelectorAllDeep } from 'query-selector-shadow-dom'
-import wildcardMatch from 'wildcard-match'
 
 import { ActionStepForm, BoxColor, ElementRect } from '~/toolbar/types'
 import { ActionStepType, StringMatching } from '~/types'
@@ -43,9 +42,13 @@ export function elementToQuery(element: HTMLElement, dataAttributes: string[]):
 
     try {
         return finder(element, {
-            attr: (name) => dataAttributes.some((dataAttribute) => wildcardMatch(dataAttribute)(name)),
             tagName: (name) => !TAGS_TO_IGNORE.includes(name),
             seedMinLength: 5, // include several selectors e.g. prefer .project-homepage > .project-header > .project-title over .project-title
+            attr: (name) => {
+                // preference to data attributes if they exist
+                // that aren't in the PostHog preferred list - they were returned early above
+                return name.startsWith('data-')
+            },
         })
     } catch (error) {
         console.warn('Error while trying to find a selector for element', element, error)

package.json

@@ -71,7 +71,7 @@
         "@dnd-kit/utilities": "^3.2.1",
         "@floating-ui/react": "^0.16.0",
         "@lottiefiles/react-lottie-player": "^3.4.7",
-        "@medv/finder": "^2.1.0",
+        "@medv/finder": "^3.1.0",
         "@microlink/react-json-view": "^1.21.3",
         "@monaco-editor/react": "4.4.6",
         "@posthog/icons": "0.5.1",
@@ -173,7 +173,6 @@
         "tailwindcss": "^3.4.0",
         "use-debounce": "^9.0.3",
         "use-resize-observer": "^8.0.0",
-        "wildcard-match": "^5.1.2",
         "zxcvbn": "^4.4.2"
     },
     "devDependencies": {