Weird issue with inputs showing old/null data after refresh

#1

I’ve noticed this issue with <select>s too. Basically after the UI gets updated some weird glitch happens where the browser thinks something isn’t what it should be. I don’t know how to explain, so heres a video:

Notice how the c input gets passed down in the UI even tho it is no longer in the data. I have no idea how to fix this.

Here is the HTML code that is output:

<div class="form-row">
    <div class="col-md">
        <input type="text" class="form-control form-control-sm " autocomplete="" placeholder="test1" wire:model.lazy="form_data.owners.5e369147abed0.test1">
    </div>
    <div class="col-md">
        <input type="tel" class="form-control form-control-sm " autocomplete="" placeholder="test2" wire:model.lazy="form_data.owners.5e369147abed0.test2">
    </div>
    <div class="col-md">
        <input type="email" class="form-control form-control-sm " autocomplete="" placeholder="test3" wire:model.lazy="form_data.owners.5e369147abed0.test3">
    </div>
    <div class="col-md-auto">
        <button class="btn btn-sm btn-danger" wire:click="arrayRemove('owners', '5e369147abed0')"><i class="fa fa-trash"></i></button>
    </div>
</div>

The arrayRemove function simply unsets the form_data.owners array element at the given key. Like I said I noticed this happening with non-array properties as well before. I had a select and when I would change the value the browser would show an empty option as being selected, and I have no clue why.

#2

Does it do the same thing if you take .lazy off your inputs?

#3

I figured it out. It’s because I needed to preset the array keys BEFORE passing them to livewire.