filament: Repeater bug when have searchable select field inside

Package

filament/filament

Package Version

v3.0.27

Laravel Version

v10.19.0

Livewire Version

v3.0.0-beta10

PHP Version

PHP 8.1.10

Problem description

This bug only happens when we have searchable select input inside the repeater.

When deleting or moving an item, the item looks deleted but the console says: select.js?v=3.0.27.0:1 Uncaught (in promise) Could not find Livewire component in DOM tree or select.js?v=3.0.27.0:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'clearStore') or select.js?v=3.0.27.0:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'clear') and/or with warning: Trying to initialise Choices on element already initialised

Then when adding an item after that, it will create 2 items (or more in further situations).

Expected behavior

The row must be deleted and without bringing issue after that.

Steps to reproduce

Clone the repo, configure, install, etc. User seeder is available: test@example.com, pass: password
Go to Foos create page
Play around with the Select items (add, delete or move)
You’ll see the glitches, and
Check the console

Reproduction repository

https://github.com/margarizaldi/filament-repeater-bug

Relevant log output

select.js?v=3.0.27.0:1 Uncaught (in promise) Could not find Livewire component in DOM tree

select.js?v=3.0.27.0:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'clearStore')

select.js?v=3.0.27.0:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'clear')

About this issue

Original URL
State: closed
Created 10 months ago
Reactions: 3
Comments: 16 (9 by maintainers)

Most upvoted comments

Yup, that fix hasnt been released by Livewire yet.

danharrin on Sep 5, 2023

I believe livewire/livewire#6521 is a failing test for this

danharrin on Aug 25, 2023

I have the same issue, and reported this earlier as well, including a reproduction repository: https://github.com/filamentphp/filament/issues/7584

Others, have reported this as well; https://github.com/filamentphp/filament/issues/7485

I’m on the latest Livewire, latest Laravel & Filament versions:

Laravel: 10.19 Livewire: v3.0.0-beta.10 Filament: v3.0.30

Given though, just add the following code in a random project you have that runs Filament V3 basically, you’d get the repeater bug (video inside my issue):

return $form
    ->schema([
        Forms\Components\Repeater::make('test')->columns(2)->schema([
            Forms\Components\TextInput::make('hi'),
            Forms\Components\Select::make('options')
                ->searchable()
                ->options([
                    'one', 'two'
                ])
        ]),
    ]);

Good thing to know, this only happens if there’s JS introduced inside the form component, in this case, AlpineJS because of the searchable select field. If you remove the ->searchable(), all is fine.

Cannonb4ll on Aug 21, 2023