wa-button has only onblur / onfocus

[tiagogalvao]

Describe the bug

When trying to use the library along with react, the lack of an onClick event handler messes a lot with the behavior of the component. Using onblur or onfocus leads to inconsistent behavior of course. Workarounds are messy to do.
Please note that I am not using WaButton (which has onClick) - because of Next, at least at the moment, its easier for me to use wa-button directly.

To Reproduce

Not needed. Just trying to use the wa-button while having an onClick action.

Additional information

Feel free to ask for.

[claviska]

Click is a global event that gets dispatched by all elements. In the context of Next.js, it's probably best to use the React wrappers for an immediate solution. It sounds like React or Next.js needs to be made aware of global events on custom elements, so it may be worth posting an issue there as this will affect more than just Web Awesome.

Otherwise, you can use a ref to add the listener (more boilerplatey) or maybe onClickCapture as an alternative. I'm not sure this is something we can fix, but the wrappers should solve it for you if nothing else.

[tiagogalvao]

UI related coding is not my strongest skill, but I have tried to play a bit with ref but it seem like related features stop working.

So click would work fine, but I am losing the loading and the disabled state. I would have to play a little longer I guess.

If you know how to make webawesome react components work fine with next, that might provide a better solution overall

[tiagogalvao]

onClickCapture seem to be the way to go. I had some time today and was doing some tests!

using the ref was...... completely breaks everything

thanks for the tip