asss02's avatar

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

0 likes
2 replies
asss02's avatar

@idew Thanks, but looking through the internet I found that using wire:key solves the problem and it works.

2 likes

Please or to participate in this conversation.