Fix overlay clickthroughs

[rossmc]

Remove the pointer-events-none class from the overlay. This class disables pointer events, allowing interaction with elements behind the overlay, which defeats its purpose, especially for an overlay containing a spinner.

I encountered this issue while working on the Hyvä checkout with Stripe. If the user double-clicked 'Proceed to review & payments,' the Google Wallet payment option would sometimes appear twice, as each click caused digital wallet methods (like Google and Apple Pay) to initialize multiple times.

[GrimLink]

@rossmc the removal of the pointer-events-none feels like a band-aid solution.

The reason that this on the overlay is to prevent any clicks, from passing down.
If we used the HTML Dialog, you would keep the same issue with the native overlay (backdrop).

From what I read in your description, the solution should be to avoid extra clicks on the 'Proceed to review & payments' button.
This will solve the double render without breaking the overlay behavior.

[rossmc]

Hi @GrimLink ,
I think you misunderstood me and we are suggesting the same thing...

The reason that this on the overlay is to prevent any clicks, from passing down.

That is the opposite of what pointer-events-none does.

Use pointer-events-none to make an element ignore pointer events. The pointer events will still trigger on child elements and pass-through to elements that are “beneath” the target.
https://tailwindcss.com/docs/pointer-events#controlling-pointer-event-behavior

Usually when a spinner overlay is used it is to stop users from clicking elements beneath it. Add the pointer-events-none allows users to click elements beneath it, adding unusual behavior for an overlay. Do you see this CSS rule applied to spinner overlays usually?

[GrimLink]

Your right @rossmc, my apologies, I have seem to have mixed the behavior around, we want to overlay from prevent clicks below, not the other way around, in that case I will approve the MR

[GrimLink]

This solves the issue from clicks passing trough the overlay @wpoortman,
the pointer-events-none should not be added here if we want to prevent any clicks from passing down.

I mixed the CSS Property around in my first review 😅 while my intentions where the same as @rossmc, so this MR is perfectly valid.

My other point still stands for keyboard users, since technically with a keyboard we can still click the button.
But we could add this in a separate MR and merge this one for at least mouse and touch clicks

[wpoortman]

Thank you both for your contribution!