Web component click events not triggered in Chakra UI's Modal

[baptisteArno]

Describe the bug

My web components work perfectly in my React app.

But when I embed it in a Chakra UI Modal, all the click events of the web component don't trigger. It's not an issue with Chakra UI because I couldn't reproduce with a "native" web component (https://codesandbox.io/s/still-tdd-r963u1)

It happens with all the web components created with customElement from solid-element

Your Example Website or App

https://codesandbox.io/s/gifted-satoshi-rux0b0

Steps to Reproduce the Bug or Issue

1. The counter outside the modal works well
2. Open the modal
3. Clicks don't work.

Expected behavior

Click events should work.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 109

Additional context

Here is the source of the solid-counter.ts file:

import { createSignal } from "solid-js";
import { customElement } from "solid-element";

const style = `div * {
  font-size: 200%;
}

span {
  width: 4rem;
  display: inline-block;
  text-align: center;
}

button {
  width: 4rem;
  height: 4rem;
  border: none;
  border-radius: 10px;
  background-color: seagreen;
  color: white;
}`;

customElement("solid-counter", () => {
  const [count, setCount] = createSignal(0);
  return (
    <div>
      <style>{style}</style>
      <button onClick={() => setCount(count() - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count() + 1)}>+</button>
    </div>
  );
});

[mdynnl]

This would stop bubbling which solid won't get to handle the event at all (Probably report there). You can still use native events. On a related note, solid could also delegate at capturing phase which might be useful in some rare cases.

[baptisteArno]

That's what I guessed.

Do you know why it would work with native events but not the delegated event?

Not sure what would be the best solution for me there. I probably need to do something on Chakra UI's side then. Do you have a quick win fix for the use-modal file in mind?

EDIT: Delegated content are created using document.addEventListener but native event would attach the event listener to the element

[ryansolid]

Is there any resolution that is being asked for, or is this more of a question?

[baptisteArno]

All good on my side! This can be closed