AG-51992 Improve 'trusted-click-element' — regression about handling React HTMLElements. #554

AdamWr · AdamWr · commit 5680d8d62205 · 2026-03-18T11:15:47.000Z
Squashed commit of the following: commit b881e68 Author: Adam Wróblewski <adam@adguard.com> Date: Tue Mar 17 15:56:43 2026 +0100 Improve 'trusted-click-element' scriptlet, add ability to enforce native click, and pass event to reactProps.onClick and reactProps.onFocus
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,8 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 
 ### Changed
 
+- `trusted-click-element` now passes synthetic-like event objects to React handlers
+  and supports `clickType:native` in `extraMatch` to force native click [#554].
 - Added `interceptChainProp` helper to share intermediate chain property access logic
   across `abort-on-property-read`, `abort-on-property-write`, `abort-on-stack-trace`,
   `abort-current-inline-script`, `debug-on-property-write`, `debug-on-property-read`,
@@ -48,6 +50,7 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 [#545]: https://github.com/AdguardTeam/Scriptlets/issues/545
 [#549]: https://github.com/AdguardTeam/Scriptlets/issues/549
 [#552]: https://github.com/AdguardTeam/Scriptlets/issues/552
+[#554]: https://github.com/AdguardTeam/Scriptlets/issues/554
 
 ## [v2.2.16] - 2026-02-19
 
diff --git a/src/helpers/click-utils.ts b/src/helpers/click-utils.ts
@@ -188,29 +188,11 @@ export const bridgeIframeLoads = (nodes: NodeList) => {
  * so we need to trigger React's synthetic event handlers directly.
  *
  * @param element HTML element to click.
+ * @param clickType Optional click mode. Use 'native' to bypass React internal handlers.
  */
-export const clickElement = (element: HTMLElement): void => {
+export const clickElement = (element: HTMLElement, clickType = ''): void => {
     const REACT_PROPS_KEY_PREFIX = '__reactProps$';
-
-    // Find React internal props key on the element
-    const reactPropsKey = Object.keys(element).find((key) => key.startsWith(REACT_PROPS_KEY_PREFIX));
-
-    // If React props are found, try to use React's handlers
-    if (reactPropsKey) {
-        const reactProps = (element as unknown as Record<string, unknown>)[reactPropsKey] as {
-            onFocus?: () => void;
-            onClick?: () => void;
-        } | undefined;
-
-        if (reactProps && typeof reactProps.onClick === 'function') {
-            // Call onFocus first if available, as some React components require it
-            if (typeof reactProps.onFocus === 'function') {
-                reactProps.onFocus();
-            }
-            reactProps.onClick();
-            return;
-        }
-    }
+    const NATIVE_CLICK_TYPE = 'native';
 
     // Simulate a realistic click because it may not be enough to execute element.click()
     // https://github.com/AdguardTeam/Scriptlets/issues/491
@@ -234,23 +216,214 @@ export const clickElement = (element: HTMLElement): void => {
     const noBubbleOpts: MouseEventInit = Object.assign({}, commonOpts, { bubbles: false });
     const releaseOpts: MouseEventInit = Object.assign({}, commonOpts, { buttons: 0 });
 
-    // Feature-detect PointerEvent for environments that don't support it
-    const hasPointerEvent = typeof PointerEvent === 'function';
+    /**
+     * Creates a trusted-looking event proxy for either React handlers or native
+     * inline handlers.
+     *
+     * React handlers need extra SyntheticEvent-like fields such as
+     * `nativeEvent`, `persist()`, `isDefaultPrevented()` and stable
+     * `currentTarget`. Native inline handlers only need the original event with
+     * `isTrusted` spoofed to `true`.
+     *
+     * @param nativeEvent Original DOM event.
+     * @param eventType Event type exposed to the handler.
+     * @param isReactEvent Whether to expose React-specific SyntheticEvent-like fields.
+     *
+     * @returns Proxied event object with the fields needed for the target handler type.
+     */
+    const createEventProxy = (nativeEvent: Event, eventType: string, isReactEvent = false): Event => {
+        let defaultPrevented = nativeEvent.defaultPrevented;
+        let propagationStopped = false;
+
+        return new Proxy(nativeEvent, {
+            get(target, prop) {
+                if (prop === 'isTrusted') {
+                    return true;
+                }
+                if (!isReactEvent) {
+                    const value = Reflect.get(target, prop);
+                    if (typeof value === 'function') {
+                        return value.bind(target);
+                    }
 
-    if (hasPointerEvent) {
-        element.dispatchEvent(new PointerEvent('pointerover', commonOpts));
-        element.dispatchEvent(new PointerEvent('pointerenter', noBubbleOpts));
-    }
-    element.dispatchEvent(new MouseEvent('mouseover', commonOpts));
-    element.dispatchEvent(new MouseEvent('mouseenter', noBubbleOpts));
-    if (hasPointerEvent) {
-        element.dispatchEvent(new PointerEvent('pointerdown', commonOpts));
-    }
-    element.dispatchEvent(new MouseEvent('mousedown', commonOpts));
-    element.focus();
-    if (hasPointerEvent) {
-        element.dispatchEvent(new PointerEvent('pointerup', releaseOpts));
+                    return value;
+                }
+                if (prop === 'nativeEvent') {
+                    return target;
+                }
+                if (prop === 'target' || prop === 'srcElement' || prop === 'currentTarget') {
+                    return element;
+                }
+                if (prop === 'type') {
+                    return eventType;
+                }
+                if (prop === 'defaultPrevented') {
+                    return defaultPrevented;
+                }
+                if (prop === 'persist') {
+                    return () => {};
+                }
+                if (prop === 'isDefaultPrevented') {
+                    return () => defaultPrevented;
+                }
+                if (prop === 'isPropagationStopped') {
+                    return () => propagationStopped;
+                }
+                if (prop === 'preventDefault') {
+                    return () => {
+                        defaultPrevented = true;
+                        target.preventDefault();
+                    };
+                }
+                if (prop === 'stopPropagation') {
+                    return () => {
+                        propagationStopped = true;
+                        target.stopPropagation();
+                    };
+                }
+                if (prop === 'stopImmediatePropagation') {
+                    return () => {
+                        propagationStopped = true;
+                        if (typeof target.stopImmediatePropagation === 'function') {
+                            target.stopImmediatePropagation();
+                        }
+                    };
+                }
+
+                const value = Reflect.get(target, prop);
+                if (typeof value === 'function') {
+                    return value.bind(target);
+                }
+
+                return value;
+            },
+        });
+    };
+
+    /**
+     * Temporarily wraps inline `on...` handlers on the clicked element so they receive
+     * a proxied event with spoofed `isTrusted`.
+     *
+     * @param target Event target to inspect for inline handlers.
+     * @param eventTypes Event types whose `on...` properties should be wrapped.
+     *
+     * @returns Cleanup function that restores original inline handlers.
+     */
+    const wrapInlineHandlers = (target: EventTarget, eventTypes: Set<string>): (() => void) => {
+        const originalHandlers = new Map<string, OnErrorEventHandler | EventListener | null>();
+        const targetRecord = target as unknown as Record<string, unknown>;
+
+        eventTypes.forEach((eventType) => {
+            const propertyName = `on${eventType}`;
+            const handler = targetRecord[propertyName];
+
+            if (typeof handler !== 'function' || originalHandlers.has(propertyName)) {
+                return;
+            }
+
+            originalHandlers.set(propertyName, handler as EventListener);
+            targetRecord[propertyName] = function wrappedInlineHandler(this: unknown, event: Event) {
+                const onEventProxy = createEventProxy(event, eventType);
+                return handler.call(this, onEventProxy);
+            };
+        });
+
+        return () => {
+            originalHandlers.forEach((handler, propertyName) => {
+                targetRecord[propertyName] = handler;
+            });
+        };
+    };
+
+    /**
+     * Creates a focus event for the direct React handler path.
+     *
+     * @returns Focus event object compatible with the current environment.
+     */
+    const createFocusEvent = (): Event => {
+        if (typeof FocusEvent === 'function') {
+            return new FocusEvent('focus', {
+                bubbles: false,
+                cancelable: false,
+                composed: true,
+                relatedTarget: null,
+            });
+        }
+
+        return new Event('focus', {
+            bubbles: false,
+            cancelable: false,
+            composed: true,
+        });
+    };
+
+    /**
+     * Dispatches the synthetic pointer and mouse sequence used by the native
+     * click path while temporarily wrapping inline handlers on the bubbling path.
+     */
+    const dispatchNativeClick = (): void => {
+        // Feature-detect PointerEvent for environments that don't support it
+        const hasPointerEvent = typeof PointerEvent === 'function';
+        const spoofedEventTypes = new Set([
+            'click',
+            'mousedown',
+            'mouseup',
+            'mouseover',
+            'mouseenter',
+            'pointerdown',
+            'pointerup',
+            'pointerover',
+            'pointerenter',
+        ]);
+        const restoreInlineHandlers = wrapInlineHandlers(element, spoofedEventTypes);
+
+        try {
+            if (hasPointerEvent) {
+                element.dispatchEvent(new PointerEvent('pointerover', commonOpts));
+                element.dispatchEvent(new PointerEvent('pointerenter', noBubbleOpts));
+            }
+            element.dispatchEvent(new MouseEvent('mouseover', commonOpts));
+            element.dispatchEvent(new MouseEvent('mouseenter', noBubbleOpts));
+            if (hasPointerEvent) {
+                element.dispatchEvent(new PointerEvent('pointerdown', commonOpts));
+            }
+            element.dispatchEvent(new MouseEvent('mousedown', commonOpts));
+            element.focus();
+            if (hasPointerEvent) {
+                element.dispatchEvent(new PointerEvent('pointerup', releaseOpts));
+            }
+            element.dispatchEvent(new MouseEvent('mouseup', releaseOpts));
+            element.dispatchEvent(new MouseEvent('click', releaseOpts));
+        } finally {
+            restoreInlineHandlers();
+        }
+    };
+
+    // Find React internal props key on the element
+    const reactPropsKey = Object.keys(element).find((key) => key.startsWith(REACT_PROPS_KEY_PREFIX));
+
+    // If React props are found, try to use React's handlers
+    // If clickType is 'native', skip React handlers and dispatch native click directly
+    // https://github.com/AdguardTeam/Scriptlets/issues/554
+    if (reactPropsKey && clickType !== NATIVE_CLICK_TYPE) {
+        const reactProps = (element as unknown as Record<string, unknown>)[reactPropsKey] as {
+            onFocus?: (event?: Event) => void;
+            onClick?: (event?: Event) => void;
+        } | undefined;
+
+        if (reactProps && typeof reactProps.onClick === 'function') {
+            // Call onFocus first if available, as some React components require it
+            if (typeof reactProps.onFocus === 'function') {
+                const focusEvent = createFocusEvent();
+                const eventFocusProxy = createEventProxy(focusEvent, 'focus', true);
+                reactProps.onFocus.call(element, eventFocusProxy);
+            }
+            const clickEvent = new MouseEvent('click', releaseOpts);
+            const eventClickProxy = createEventProxy(clickEvent, 'click', true);
+            reactProps.onClick.call(element, eventClickProxy);
+            return;
+        }
     }
-    element.dispatchEvent(new MouseEvent('mouseup', releaseOpts));
-    element.dispatchEvent(new MouseEvent('click', releaseOpts));
+
+    dispatchNativeClick();
 };
diff --git a/src/scriptlets/trusted-click-element.ts b/src/scriptlets/trusted-click-element.ts
@@ -27,6 +27,7 @@ import { type Source } from './scriptlets';
  * If `containsText` is specified, then it searches for all given selectors and clicks
  * the first element containing the specified text.
  * Deactivates after all elements have been clicked or by timeout (configurable).
+ * Click behavior can be forced to native dispatch through `extraMatch`.
  *
  * ### Syntax
  *
@@ -45,6 +46,7 @@ import { type Source } from './scriptlets';
  *     - `cookie` — test string or regex against cookies on a page
  *     - `localStorage` — check if localStorage item is present
  *     - `containsText` — check if clicked element contains specified text
+ *     - `clickType` — set click behavior; supported value is `native`
  * - `delay` — optional, time in **ms** to delay scriptlet execution, defaults to instant execution.
  *   Must be a number less than `observerTimeout` (default 10 _seconds_)
  *   which can be configured.
@@ -124,6 +126,12 @@ import { type Source } from './scriptlets';
  *     example.com#%#//scriptlet('trusted-click-element', 'button[name="agree"]', '!cookie:consent, !localStorage:promo')
  *     ```
  *
+ * 1. Force native click dispatch even if React handlers are detected
+ *
+ *     ```adblock
+ *     example.com#%#//scriptlet('trusted-click-element', 'button[name="agree"]', 'clickType:native')
+ *     ```
+ *
  * 1. Click element inside open shadow DOM, which could be selected by `div > button`, but is inside shadow host element with host element selected by `article .container`
  *
  *    ```adblock
@@ -193,12 +201,14 @@ export function trustedClickElement(
     const COOKIE_MATCH_MARKER = 'cookie:';
     const LOCAL_STORAGE_MATCH_MARKER = 'localStorage:';
     const TEXT_MATCH_MARKER = 'containsText:';
+    const CLICK_TYPE_MATCH_MARKER = 'clickType:';
+    const CLICK_TYPE_NATIVE = 'native';
     const RELOAD_ON_FINAL_CLICK_MARKER = 'reloadAfterClick';
     const SELECTORS_DELIMITER = ',';
     const COOKIE_STRING_DELIMITER = ';';
     const COLON = ':';
     // Regex to split match pairs by commas, avoiding the ones included in regexes
-    const EXTRA_MATCH_DELIMITER = /(,\s*){1}(?=!?cookie:|!?localStorage:|containsText:)/;
+    const EXTRA_MATCH_DELIMITER = /(,\s*){1}(?=!?cookie:|!?localStorage:|containsText:|clickType:)/;
 
     const sleep = (delayMs: number) => {
         return new Promise((resolve) => { setTimeout(resolve, delayMs); });
@@ -301,6 +311,7 @@ export function trustedClickElement(
     const cookieMatches: string[] = [];
     const localStorageMatches: string[] = [];
     let textMatches = '';
+    let clickType = '';
     let isInvertedMatchCookie = false;
     let isInvertedMatchLocalStorage = false;
 
@@ -329,6 +340,21 @@ export function trustedClickElement(
                 const textMatch = matchValue.replace(TEXT_MATCH_MARKER, '');
                 textMatches = textMatch;
             }
+            if (matchStr.includes(CLICK_TYPE_MATCH_MARKER)) {
+                const { isInvertedMatch, matchValue } = parseMatchArg(matchStr);
+                if (isInvertedMatch) {
+                    logMessage(source, `Passed click type '${matchStr}' is invalid`);
+                    return;
+                }
+
+                const passedClickType = matchValue.replace(CLICK_TYPE_MATCH_MARKER, '');
+                if (passedClickType !== CLICK_TYPE_NATIVE) {
+                    logMessage(source, `Passed click type '${passedClickType}' is invalid`);
+                    return;
+                }
+
+                clickType = passedClickType;
+            }
         });
     }
 
@@ -431,7 +457,7 @@ export function trustedClickElement(
                 logMessage(source, `Could not find element: '${elementObj.selectorText}'`);
                 return;
             }
-            clickElement(element);
+            clickElement(element, clickType);
             elementObj.clicked = true;
         } catch (error) {
             logMessage(source, `Could not click element: '${elementObj.selectorText}'`);
@@ -506,7 +532,7 @@ export function trustedClickElement(
                 // if not, try to find the element again
                 // https://github.com/AdguardTeam/Scriptlets/issues/391
                 if (elementObj.element.isConnected) {
-                    clickElement(elementObj.element);
+                    clickElement(elementObj.element, clickType);
                     elementObj.clicked = true;
                 } else {
                     findAndClickElement(elementObj);
diff --git a/tests/scriptlets/trusted-click-element.test.js b/tests/scriptlets/trusted-click-element.test.js
