Filament•4w ago

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.

2 Replies

LeandroFerreira•4w ago

try it using debounce

Advanced forms - Form Builder - Filament

pjbOP•4w ago

Thanks @Leandro Ferreira . Could you explain how applying a debounce would help in my situation? I'm already waiting 30+ seconds between typing each letter into the search box. Is that not effectively a manual 30 second debounce?

Gaming

Programming

Datalist with ->live() throwing JS Uncaught TypeError When Updating Suggestion List