Select field doesn't render

I just updated to version 4, and the Select fields do not render properly at all. This is my Select code:
Select::make('country_id')
->relationship(name: 'country', titleAttribute: 'country_name')
->createOptionForm([
Grid::make(2)
->schema([
TextInput::make('country_code')
->label('Код')
->required()
->maxLength(255),

TextInput::make('country_name')
->label('Име')
->required()
->maxLength(255),
]),
])
->label('Држава')
->native(false)
->searchable()
->preload(),
Select::make('country_id')
->relationship(name: 'country', titleAttribute: 'country_name')
->createOptionForm([
Grid::make(2)
->schema([
TextInput::make('country_code')
->label('Код')
->required()
->maxLength(255),

TextInput::make('country_name')
->label('Име')
->required()
->maxLength(255),
]),
])
->label('Држава')
->native(false)
->searchable()
->preload(),
The field seems to not be populated at all. If I remove native, searchable, and preload, the field works. Tried with/without my theme, same issue. This console error shows up but I cannot make sense of it:
Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild')
at ut.render (select.js?v=4.1.7.0:1:19623)
at new ut (select.js?v=4.1.7.0:1:16154)
at Proxy.init (select.js?v=4.1.7.0:1:44597)
at evaluatorMemo (livewire.js?id=df3a17f2:1160:25)
at tryCatch (livewire.js?id=df3a17f2:1116:14)
at evaluate (livewire.js?id=df3a17f2:1140:34)
at Function.<anonymous> (livewire.js?id=df3a17f2:3571:29)
at flushHandlers (livewire.js?id=df3a17f2:1281:48)
at stopDeferring (livewire.js?id=df3a17f2:1286:7)
at deferHandlingDirectives (livewire.js?id=df3a17f2:1289:5)
Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild')
at ut.render (select.js?v=4.1.7.0:1:19623)
at new ut (select.js?v=4.1.7.0:1:16154)
at Proxy.init (select.js?v=4.1.7.0:1:44597)
at evaluatorMemo (livewire.js?id=df3a17f2:1160:25)
at tryCatch (livewire.js?id=df3a17f2:1116:14)
at evaluate (livewire.js?id=df3a17f2:1140:34)
at Function.<anonymous> (livewire.js?id=df3a17f2:3571:29)
at flushHandlers (livewire.js?id=df3a17f2:1281:48)
at stopDeferring (livewire.js?id=df3a17f2:1286:7)
at deferHandlingDirectives (livewire.js?id=df3a17f2:1289:5)
No description
6 Replies
Amelia
Amelia2mo ago
Your issue is a known problem when upgrading to Filament v4: the Select field (especially with ->native(false), ->searchable(), or ->preload()) does not render or populate, and you may see a JavaScript error like "Cannot read properties of undefined (reading 'appendChild')" in the console. This points to a bug in how the custom select is being initialized or rendered, which may be tied to compatibility or to how options/data are loaded in version 4.
Dennis Koch
Dennis Koch2mo ago
Do you have old assets? Browser cache or didn't run php artisan filament:assets?
Никола Стојков
no browser cache, no old assets, the command has been run multiple times
Никола Стојков
this too, ToggleButtons I've tried just about everything, deleted all caches manually etc, still no luck

Did you find this page helpful?