Event handling is different between Preact and React

Reproduction

There are two code sandboxes implementing the same thing in Preact and React

• Preact: https://hlg2t.csb.app/
• React: https://zy55p.csb.app/

Steps to reproduce

1. Click on “Expand me”
2. Click on “close”

Expected Behavior

The panel should close (and it does in React)

Actual Behavior

The panel does not close in Preact

---

This seem to be related to the way these frameworks handle events. React uses event delegation and Preact applies direct event listeners. Hence the click event bubbles up and reaches the panel root when it already was re-rendered, which breaks the toggle implementation.

I found a similar issue https://github.com/preactjs/preact/issues/838 but since that one was already closed as resolved I opened a new one.

[JoviDeCroock]

This is fixed with switching to setTimeout for debouncing as well, we should include this or an alternative scheduler for 11 https://codesandbox.io/s/cocky-star-bw9sgv?file=/src/index.js

[JoviDeCroock]

You could also try doing:

import { options } from 'preact';

const oldEventOptions = options.event;
options.event = (e) => {
  if (e.type === 'click' && e.target.id === 'myFlakeyButton') e.stopPropagation()
  if (oldEventOptions) oldEventOptions(e);
}

You can adjust that first check to just target the button you like