Open brainlid opened 1 week ago
I'd say this is a bug. We shouldn't add phx-click-loading
if there was no click.
The issue comes from JS.patch
issuing a pushHistoryPatch with the source element (in this case the modal) as target:
So one way to fix it would be to just not pass the source element there, but that would probably break
<button phx-click={JS.patch(...)}>
@chrismccord
Environment
Actual behavior
Being inspired by Jose's video, I thought adding
phx-click-loading
classes to a button click would be a great way to give visual feedback of a click that is handled by LiveView. This is particularly important on mobile clients when hover styles have been disabled (because those cause bad UX).It worked great until I closed the modal it was on.
The docs here explain:
This is not entirely true. The default Tailwind setup (also in the docs), adds the following variant:
When I close a modal by either hitting "Escape" or the "Close" button (with triggers the
on_cancel
), then aphx-click-loading
class is added to the modal. This causes ALL buttons on the modal withphx-click-loading:bg-indigo-600 phx-click-loading:text-white
to appear as though they were clicked.I tried changing the Tailwind variant to look like this:
Making the effect not apply to it's children. Essentially, trying to make the docs true about ONLY applying to the clicked item. However, this doesn't work well when a clicked element has a nested
span
ordiv
. The nested elements not longer gets the style applied.Desired behavior
Don't apply the
phx-click-loading
to a modal, or at least provide a way to NOT automatically apply it. It breaks the usability ofphx-click-loading
on elements inside the modal.