Color Picker crashes page with pagination

[TijsDeMulWeb]

Flux version

v2.14.1

Livewire version

v4.3.1

Tailwind version

v4.3.1

Browser and Operating System

Chrome on macOS

What is the problem?

When a Livewire component containing a flux:color-picker (with its default hue/alpha flux:color-picker.slider) is destroyed and re-mounted as part of a Livewire pagination request (e.g. a per-row component with a :key based on the row's id, where pagination causes a different row/component to be rendered), the browser tab freezes completely and becomes unresponsive in Chromium-based browsers (Chrome, Arc). It does not happen in Safari.

Breaking into the frozen page with the DevTools debugger shows execution stuck inside updateTicks() of the internal ui-slider element used by the color-picker's hue/alpha sliders, suggesting an infinite reactive loop (state.setValue → onChange → DOM update → re-triggers setValue) when the custom element is re-initialized after the old instance's listeners/observers were never cleaned up.

Replacing flux:color-picker with a plain <flux:input type="color"> resolves the freeze. Using flux:color-picker with a custom slot (swatches + hex input only, omitting flux:color-picker.slider) still freezes, so itself (not just the slider) appears to be involved.

Code snippets to replicate the problem

<?php

use App\Models\Post;
use Livewire\Component;
use Livewire\WithPagination;
use Livewire\Attributes\Computed;

new class extends Component {
    use WithPagination;

    #[Computed]
    public function posts()
    {
        return Post::query()->paginate(1);
    }
}; ?>

<div>
    @foreach ($this->posts as $post)
        <livewire:post-edit-modal :post="$post" :key="'post-edit-modal-'.$post->id" />
    @endforeach

    {{ $this->posts->links() }}
</div>

{{-- post-edit-modal.blade.php --}}
<?php

use App\Models\Post;
use Livewire\Component;

new class extends Component {
    public Post $post;
    public string $color = '#000000';

    public function mount(Post $post): void
    {
        $this->post = $post;
        $this->color = $post->color;
    }
}; ?>

<flux:modal :name="'edit-post-'.$post->id" class="max-w-lg">
    <flux:color-picker dropper copyable type="button" wire:model="color" format="hex" label="Color" />
</flux:modal>

Steps to reproduce:

Have at least 2 records so pagination shows 2 pages.
Load the page (works fine).
Click the pagination "next page" link.
Tab freezes and becomes unresponsive (Chrome/Arc). Force-quit required.

Screenshots/ screen recordings of the problem

Screen.Recording.2026-06-15.at.21.10.43.mov

How do you expect it to work?

Clicking pagination should re-render the row/modal for the new page's record without freezing the browser, same as in Safari.

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.

[edwinvdpol]

I have the same problem, but it doesn't involve pagination. It does however, also render in a modal.

Modal loading durations (development):

• Without a color picker: ~63ms
• With a color picker, without wire:model: ~70ms
• With a color picker, including wire:model: Crash 💥

When I render the same scenarios outside a modal, it works fine as far as I can see.

PS: I am using the wire-elements/modal package for the modal.

[ghabriel25]

Hi @edwinvdpol , that package doesnt have any update about this. It's currently not suitable for Livewire 4 as its using component keyword which is reserved by Livewire 4.

It has PR for this though doesnt get merged wire-elements/modal#560

So, instead using that package. I recommend using flux modal

[edwinvdpol]

@ghabriel25 It works fine with Livewire 4 here, that isn't the issue. 😉
The question is, is the crash maybe related to the DOM and only crashes inside a modal?

[joshhanley]

@TijsDeMulWeb and @edwinvdpol thanks for reporting! I believe this is a duplicate of #2607 which has been fixed and released in v2.15.0. Please update and test again. I'm going to close this for now, but if it doesn't fix your issue, please comment back here and I will reopen it. Thanks!