pjb
pjb
FFilament
Created by pjb on 12/8/2024 in #❓┊help
Changing Field Wrapper View for Form Component Throws Exception
What I am trying to do: I am trying to use the fieldWrapperView() method on a Select form component to change which blade file gets used for the field wrapper. What I did: I copied vendor/filament/forms/resources/views/components/field-wrapper/index.blade.php to resources/views/filament/field-wrapper.blade.php then updated the Select to:
Forms\Components\Select::make('city')
->view('filament.address-verify-city-select')
->fieldWrapperView('filament.field-wrapper')
Forms\Components\Select::make('city')
->view('filament.address-verify-city-select')
->fieldWrapperView('filament.field-wrapper')
I also tried various different directory/sub-directory structures and naming conventions in my resources/views and fieldWrapperView() calls to make it work, to no avail. I have another blade template in the same directory, which I use in the ->view('filament.address-verify-city-select') call and that works just fine.
My issue / the error:
InvalidArgumentException
Unable to locate a class or view for component [filament.field-wrapper].
InvalidArgumentException
Unable to locate a class or view for component [filament.field-wrapper].
Appreciate any help! Thanks!
8 replies
FFilament
Created by pjb on 11/26/2024 in #❓┊help
Datalist with ->live() throwing JS Uncaught TypeError When Updating Suggestion List
What I am trying to do: I'm using a live datalist to suggest potential valid street address based on an entered partial street address and a postal code. Example: if the user types in "123 Main" they may get suggestions for "123 Main St", "123 Main Ave", "123 Main Blvd", etc. I've limited the maximum number of suggestions to 5, and there is always at least 1 suggestion available. What I did:
Forms\Components\TextInput::make('address_1')
->live()
->datalist(
fn(Get $get, string|null $state): array => $this->getAddressOneOptions($state, $get('postal_code'))
)
Forms\Components\TextInput::make('address_1')
->live()
->datalist(
fn(Get $get, string|null $state): array => $this->getAddressOneOptions($state, $get('postal_code'))
)
My issue / the error: As I enter the first few characters, the suggestions that show in the datalist match what my getAddressOneOptions() method is returning. However, as I continue to delete characters and type more characters, so so that the potential suggestions change, the datalist options get out of sync with what my method is returning, until they stop updating entirely when the below exception is thrown:
Uncaught TypeError: Cannot read properties of null (reading 'before')
at Block.appendChild (livewire.js?id=38dc8241:8464:23)
at patchChildren (livewire.js?id=38dc8241:8292:21)
at patchChildren (livewire.js?id=38dc8241:8334:11)
at patch (livewire.js?id=38dc8241:8229:7)
at patchChildren (livewire.js?id=38dc8241:8381:9)
at patchChildren (livewire.js?id=38dc8241:8334:11)
at patch (livewire.js?id=38dc8241:8229:7)
at patchChildren (livewire.js?id=38dc8241:8381:9)
at patchChildren (livewire.js?id=38dc8241:8334:11)
at patch (livewire.js?id=38dc8241:8229:7)
Uncaught TypeError: Cannot read properties of null (reading 'before')
at Block.appendChild (livewire.js?id=38dc8241:8464:23)
at patchChildren (livewire.js?id=38dc8241:8292:21)
at patchChildren (livewire.js?id=38dc8241:8334:11)
at patch (livewire.js?id=38dc8241:8229:7)
at patchChildren (livewire.js?id=38dc8241:8381:9)
at patchChildren (livewire.js?id=38dc8241:8334:11)
at patch (livewire.js?id=38dc8241:8229:7)
at patchChildren (livewire.js?id=38dc8241:8381:9)
at patchChildren (livewire.js?id=38dc8241:8334:11)
at patch (livewire.js?id=38dc8241:8229:7)
Initially I thought it might have been a symptom of overlapping requests, but I'm able to reproduce this even with very long (30+ secs) gaps between keystrokes, and I've verified that the server requests are only happening on keystrokes. I am new to Filament/Livewire, but not new to PHP or Laravel.
4 replies