The element receiving the click event should be a button element instead of a div

[thdk]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
When using the component in playwright e2e test, the google login popup never opens in headless mode.

What is the expected behavior?
Playwright can nicely work with popups opened from the page when they are initiated correctly.
Running end to end tests with playwright should open popups when this google button is pressed.

Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?

Steps to reproduce and if possible a minimal demo of the problem via codepen or similar.
Following repo is created containing:

• a react app with some login pages. Each page just has a login button.
• a playwright end to end test package containing tests to see if the login buttons correctly open the login popup

https://github.com/thdk/playwright-headless-popup

If this package is still maintained I can submit a PR containing a fix for this.

[thdk]

Seems the rootcause of this issue is that the button is not really disabled. You can click it. However the onClick prop of the component will only be called if the state is not disabled.

playwright automatically await click events for disabled / invisible buttons but since the div accepts the click, playwright thinks the button was clicked. However, this click event is later 'eaten' by the click handler because of the state.disabled value.