Flux Editor throws errors when used in a loop that changes order

[joshhanley]

Currently if you use the Editor component in a loop and change the order of the loop or prepend to it, the following error gets thrown multiple times. But if you just append to the loop, it doesn't throw any errors. Interestingly even though the error gets thrown, all editors still seem to function as expected.

Open the below Volt component in your browser and open the console, then either click Append Item which should work fine, or click Prepend Item which throws the error.

<?php

use Livewire\Volt\Component;

new class extends Component {

    public $items = [
        'a' => 'a',
        'b' => 'b',
        'c' => 'c',
    ];

    public function prependItem()
    {
        $this->items = ['z' => 'z'] + $this->items;
    }

    public function appendItem()
    {
        $this->items['d'] = 'd';
    }
};
?>

<flux:main container>
    <div>
        @foreach($items as $key => $value)
            <div wire:key="{{ $key }}">
                <flux:editor wire:model.live="items.{{ $key }}" :wire:key="'editor-' . $key" />
                <p>Value: {{ $value }}</p>
            </div>
        @endforeach
    </div>

    <button wire:click="prependItem">Prepend Item</button>
    <button wire:click="appendItem">Append Item</button>
</flux:main>

[mikecchops]

@joshhanley do you have an update on this one, or an ETA for when it might be fixed?

[joshhanley]

@mikecchops yep, I’ve fixed it! Hopefully Caleb should review it next week. 😊

[mikecchops]

@joshhanley great thanks Josh! I look forward to the update.