Time picker fills wire:model after it is deleted

[chillbram]

Flux version

v2.10.2

Livewire version

v3.7.3

Tailwind version

v4.1.18

Browser and Operating System

Firefox on Ubuntu

What is the problem?

After deleting a time-picker element in an array, it somehow still influences the Livewire state by filling an element which no longer existed.

In the example code and screen recording you can see that deleting an element in the array causes it to be removed from the array correctly. Triggering any arbitrary action which rerenders Livewire, causes the array to be filled with values that should logically no longer be able to exist. Note that this behavior is the same if we delete the second array element, so it's not a problem related to the order of the array.

Code snippets to replicate the problem

<?php

use Livewire\Attributes\Validate;
use Livewire\Volt\Component;

new class extends Component {
    public array $array;

    public function mount()
    {
        $this->array = [
            ['id' => 'first', 'time' => '12:00'],
            ['id' => 'second', 'time' => '15:00'],
        ];
    }

    public function delete(int $index): void
    {
        unset($this->array[$index]);
        $this->array = array_values($this->array);
    }

    public function action(): void
    {
        dd($this->array);
    }
}; ?>

<div class="flex flex-col gap-4">
    Array count: {{ count($array) }}
    @foreach($array as $key => $value)
        <div wire:key="{{ $value['id'] }}" class="flex gap-2 border-gray-500">
            <flux:time-picker wire:model="array.{{ $key }}.time"></flux:time-picker>
            <flux:button wire:click="delete({{ $key }})">Delete</flux:button>
        </div>
    @endforeach
    <flux:button wire:click="action()">Refresh</flux:button>
</div>

Screenshots/ screen recordings of the problem

show-2025-12-19_17.04.20.mp4

How do you expect it to work?

If a time-picker will be deleted it should no longer be able to influence any Livewire state.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[ganyicz]

Hi @chillbram,

Thanks for reporting!

I've submitted a PR with a fix that prevents an extra event that was being fired during time picker initialization.

However, there is an issue in your Livewire setup as well.

Below is a video with the fix already applied.

You can see the value now disappears after deletion but then returns back after the time picker is changed:

Screen.Recording.2025-12-23.at.01.05.39.mov

This happens because you're using wire:key="{{ $value['id'] }}" in your for loop.

But then on the time picker you have wire:model="array.{{ $key }}.time".

This trips up Livewire because the wire:key remains the same while the wire:model should change.

After changing the key to this: wire:key="array.{{ $key }}.time", the issue is gone completely:

Screen.Recording.2025-12-23.at.01.10.44.mov

Although I would highly recommend using the string key $value['id'] instead for wire:key, wire:model and the delete method.