Relying on delegated events in SolidJS breaks functionality in shadow roots

[ivancuric]

Description

SolidJS uses event delegation for the following events:
https://docs.solidjs.com/concepts/components/event-handlers#list-of-delegated-events

For instance, using the property onClick will register a delegated event handler, while the on:click property will register a native event listener.

ArkUI attaches its own event listeners using the delegated syntax, which in some cases, like in the Tooltip focus handlers, or in the Select outside click handler, breaks functionality when it's used inside a shadow root.

This can be somewhat mitigated by fixing the events on runtime if using asChild, using the following approach:

import { HTMLProps } from "@ark-ui/solid/factory";
import { JSX } from "solid-js/jsx-runtime";

type ElementType = keyof JSX.IntrinsicElements;

/**
 * Converts SolidJS delegated events to native events
 *
 * https://github.com/chakra-ui/ark/issues/3146#issuecomment-2556518786
 *
 * https://docs.solidjs.com/concepts/components/event-handlers#list-of-delegated-events
 */
export function eventFixer<E extends ElementType>(props: HTMLProps<E>) {
  const newObj: Record<string, unknown> = {};

  Object.entries(props).forEach(([key, value]) => {
    const lowerCaseKey = key.toLowerCase();
    let trimmedKey = lowerCaseKey;

    // it's an event handler
    if (lowerCaseKey.startsWith("on")) {
      trimmedKey = lowerCaseKey.slice(2);

      const newKey = `on:${trimmedKey}`;
      newObj[newKey] = value;
    } else {
      // if it's not an event handler
      newObj[trimmedKey] = value;
    }
  });

  return newObj;
}

This however does not work on custom events like Select's onInteractOutside.

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/~/github.com/ivancuric/solidjs-templates-yge8guon?file=src/App.tsx

Steps to Reproduce

1. Go to the repro
2. Tab-cycle between buttons to focus them
3. Toggle the event fixer on and off
4. Tooltips do not open if event's aren't fixed

Ark UI Version

5.0.0

Framework

• React
• Solid
• Vue

Browser

Chrome

Additional Information

related issue: #3146

[segunadebayo]

The only concern I have with switching to non-delegated version is losing the performance benefits they provide.

Perhaps, providing a way to switch between them might be a better idea.