Could it be that the spinner div is a child of the button? In the examples they are all sibling elements. https://laravel-livewire.com/docs/2.x/loading-states
Unexpected behavior updating properties in livewire
Hi! I hope someone can guide me, because I have been in this issue and I do not know why is this happening.
In all of tha cases what I'm doing is showing o hiding something by changing a property after doing something.
For exmple, I have users and as an Administrador I can desactivate o activate this user so, in the same view I have this button
<button wire:click="toggleModal" wire:loading.attr="disabled" class="btn button-gray-icon button-width" type="button">
<div wire:loading wire:target="toggleModal" class="spinner-border spinner-border-sm"></div>
Desactivar usuario
</button>
Which triggers this action
public function toggleModal()
{
$this->validate(['end_date' => 'required|date'], [], ['end_date' => 'Fecha de finalización']);
$this->emit('showModal');
}
The emit is being listened in a script to show a confirmation modal
@push('scripts')
<script>
window.onload = function() {
Livewire.on('scrollTop', () => {
$('html, body').animate({
scrollTop: 0
}, 800);
});
Livewire.on('showModal', () => {
$('#exampleModal').modal('toggle');
});
}
</script>
@endpush
When the user confims this action is being triggerd
public function deActivate()
{
can('user delete');
try {
$array = [
'end_date' => $this->end_date,
'eliminated_at' => now(),
'active' => 'N',
];
$this->user->update($array);
$this->sendMessage('success', 'El usuario ha sido desactivado exitosamente.');
$this->emit('updateListIns');
} catch (\Throwable $th) {
$this->sendMessage('error', $th);
}
$this->emit('showModal');
}
Then the function being called named as send message does this
public function sendMessage($type, $message)
{
session()->flash($type, $message);
$this->emit('scrollTop');
$this->active = $this->user->active;
}
So in here I changed the state of the active property to false because the user has just been desactivated and I the view i re-render to change the button to being show, so now this button appears
<button wire:click="activate" wire:loading.attr="disabled" class="btn button-gray-icon button-width" type="button">
<div wire:loading wire:target="activate" class="spinner-border spinner-border-sm"> </div>
Activar usuario
</button>
This button has a loading property to display when the target is triggered, so here comes the bad behavior because if click the button It works but livewire properities is not woking the loading isn't showing and in the console I see this error
index.js:151
Uncaught TypeError: Cannot read properties of null (reading 'includes')
at HTMLButtonElement.Element.setAttribute (index.js:151:20)
at LoadingStates.js:222:26
at doAndSetCallbackOnElToUndo (LoadingStates.js:281:9)
at LoadingStates.js:219:13
at Array.forEach (<anonymous>)
at startLoading (LoadingStates.js:208:9)
at setLoading (LoadingStates.js:179:5)
at LoadingStates.js:68:9
at MessageBus.js:17:13
at Array.forEach (<anonymous>)
Is like when changing the state and re -render livewire stops working well and it happens in other actions too so i received errors like this in the console
wire-directives.js:86
Uncaught TypeError: Cannot read properties of null (reading 'match')
at Directive.value (wire-directives.js:86:45)
at Directive.get (wire-directives.js:58:33)
at node_initializer.js:209:42
at Component.value (index.js:582:9)
at HTMLButtonElement.<anonymous> (node_initializer.js:201:23)
And like this because I am using InputMask
Uncaught TypeError: Cannot read properties of undefined (reading 'isContentEditable')
at new InputMask (app.js:14448:96)
at IMask (app.js:15260:10)
at eval (eval at safeAsyncFunction (app.js:4907:14), <anonymous>:3:32)
at app.js:4925:21
at tryCatch (app.js:4852:12)
at evaluate (app.js:4870:32)
at app.js:6245:35
at Function.<anonymous> (app.js:5573:55)
at fullHandler (app.js:5014:95)
at app.js:5144:47
So Everything works becasuse if click the buttons the action ared submitted but livewire stop working and that is the real issue
Please or to participate in this conversation.