[Bug] React – clicks not triggered inside of pane within buttons

[JakobOffersen]

Describe the bug Buttons within the CupertinoPane don't trigger onClick once clicked.

To Reproduce Steps to reproduce the behavior:

1. Clone this public repo that demonstrates the issue
2. Run npm install
3. Run npm run dev
4. Navigate to localhost:3000.
5. Click the top button. This should trigger an alert
6. Now click the button within the pane. This should also trigger an alert but it does not..

Expected behavior Buttons within the CupertinoPane should trigger onClick once clicked.

Screenshots Not applicable

Desktop (please complete the following information):

• OS: macos ventura 13.0.1 (22A400)
• Browsers: chrome version 107.0.5304.121 and safari 16.1

Additional context It seems like events are not propagated, however, the button "click"-animation still triggers when one clicks the inner button. I've also tried to set preventClicks to false and touchMoveStopPropagation to true without luck.

It might well be that I have misunderstood the docs and I've overseen something obvious.. If so, I apologise for opening an issue.

[roman-rr]

@JakobOffersen Thank you, will check within this week.

[JakobOffersen]

Thanks, @roman-rr ! Is there anything specific I can assist you with on this one?

[roman-rr]

Hello @JakobOffersen sorry for delay. Same as #169

Solutions

Remove options parentElement: "body" from your config or change to parentElement: "#__next". I believe that react doesn't propagate events outside of main application container.