Defer updating [wire:model.defer] not working for a textarea input within a modal in Laravel Livewire

Question

So I'm using Livewire 2.10.4 and I have a textarea within a modal, which looks like this:

<div
    x-data="{
        showDiscontinueModal: @entangle('showModal')
    }"
>

    <x-modal x-model="showDiscontinueModal" modalDialogClasses="modal-sm-md">

        <x-slot name="content">
            <x-input.group class="w-full">
                <x-input.label>{{ trans('rx.pharmacy_notes') }}</x-input.label>
                <x-input.textarea
                    wire:model="pharmacyNote"
                />
            </x-input.group>
        </x-slot>
       
    </x-modal>

</div>

The textarea blade component looks like this:

@aware(['error'])
@props(['error' => null])

<textarea
    type="text"
    x-bind:id="$id('input')"
    {{ $attributes->class([
        'form-input',
        'form-control',
        'missing' => $error,
    ]) }}
></textarea>

But each time the user types something in the textarea input field Livewire hydrates, causing a lot of unnecessary requests and weird behavior in the input (it flickers and erases part of what's being typed)

So far I tried to use wire:model.defer , wire:model.lazy and wire:model.debounce to try to mitigate the number of requests but for some reason this is not affecting the behavior at all. I also tested changing the field to a simple text input and that didn't work either.

Answer 1

try wire:ignore or wire:ignore.self for your textarea parent