Wire:loading not working

#1

wire:loading does not work on wire:model input when the event is fired from a listener.

//in my livewire component view
<input type="text" class="form-control" wire:loading.attr="disabled" wire:model.defer="schedule_comment"/>

window.livewire.emit('schedulingCommentModalOpen', data );

//in my livewire controller
protected $listeners = ['schedulingCommentModalOpen' => 'updateModal'];

public function updateModal(PropertyReport $inspection)
	{
		//doing work
	}
#2

How is the event triggered?

#3

I saw your question on SO. I could replicate the problem. When wire:model is present wire:loading will not work on the input element.

<?php

use Livewire\Component;

class LivewireComponent extends Component
{
    protected $listeners = ['modalOpen' => 'updateModal'];

    public $text = 'Foo';

    public function updateModal()
    {
        sleep(3);

        $this->text = 'Bar';
    }
  
    public function render()
    {
        return view('livewire-component');
    }
}

Blade

<div>
  <style>
          input[disabled] {
              border: 1px solid red;
          }
      </style>
  <div>
    <input type="text" wire:model="text" wire:loading.attr="disabled"/>
    <button wire:click="$emit('modalOpen')">Open modal</button>
  </div>
  <p wire:loading>
      Loading...
  </p>
</div>

Try for yourself: https://laravelplayground.com/#/snippets/a89792e0-29ea-476f-b232-089bb886a657 (Use pw “foobar”) to make changes.

Once you remove wire:model=“text” the disabled attribute is added.

1 Like