Wire:loading not working

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

How is the event triggered?

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.


use Livewire\Component;

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

    public $text = 'Foo';

    public function updateModal()

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


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

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