livewire: wire:loading not working when wire:click is added to button

I had to replace the button with a click me to make it work.

@calebporzio @jeffochoa Just wanted to note I came across the same issue. This works:

<div class="col-md offset-md-2">
    <a href="#" class="btn btn-primary" wire:click.prevent="telSubmit" wire:loading.class="disabled">
        <span wire:loading wire:target="telSubmit" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        {{ __('Verify') }}
    </a>
    <button class="btn btn-outline-danger" wire:click="telCancel" wire:loading.attr="disabled">{{ __('Cancel') }}</button>
    <button class="btn btn-link" wire:click="telVerify('call')" wire:loading.attr="disabled">{{ __('Call me instead') }}</button>
</div>

This does not:

<div class="col-md offset-md-2">
    <button class="btn btn-primary" wire:click="telSubmit" wire:loading.attr="disabled">
        <span wire:loading wire:target="telSubmit" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        {{ __('Verify') }}
    </button>
    <button class="btn btn-outline-danger" wire:click="telCancel" wire:loading.attr="disabled">{{ __('Cancel') }}</button>
    <button class="btn btn-link" wire:click="telVerify('call')" wire:loading.attr="disabled">{{ __('Call me instead') }}</button>
</div>

But with some further investigation, it seems like it was a problem with targeting the DOM. Adding some unique id attributes to the buttons fixed it:

<div class="col-md offset-md-2">
    <button id="telSubmitter" href="#" class="btn btn-primary" wire:click.prevent="telSubmit" wire:loading.attr="disabled">
        <span wire:loading wire:target="telSubmit" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        {{ __('Verify') }}
    </button>
    <button id="telCanceller" class="btn btn-outline-danger" wire:click="telCancel" wire:loading.attr="disabled">{{ __('Cancel') }}</button>
    <button id="telVerifyTel" class="btn btn-link" wire:click="telVerify('call')" wire:loading.attr="disabled">{{ __('Call me instead') }}</button>
</div>

Hope that might get closer to the issue.

As a workaround to this problem, I have set the wire:target attribute to both of the relevant actions.

In @flamisz example, this would mean adding wire:target="cancel, submit" to the cancel button (assuming the submit button triggers an action called submit)

For anyone else coming across this problem later, https://github.com/livewire/livewire/issues/1012#issuecomment-687573922 is a possible work around.

I used this to resolve an issue where I was replacing one button with another button, and the second button was becoming disabled.

@calebporzio I have the same issue with a <li>:

<li wire:loading.class="opacity-50" x-on:click="open = false" wire:click="$set('category_name', '{{ $category->name }}')" class="transition-colors cursor-pointer hover:bg-gray-100 pt-3 px-4 text-sm">

If I delete wire:click event, wire:loading.class runs.

wire:target=“cancel, submit”

That does the trick, thanks @acurrieclark . But I still believe it’s a bug that should be solved.