Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

jeevamugunthan's avatar

Filament table SelectFilter not working properly

Hello,

I have used filament SelectFilter in the table,

->filters([
                SelectFilter::make('Status')
                    ->relationship('status','name')
                    ->searchable()
                    ->preload()
                    ->label('Filter by Status')
                    ->indicator('Status'),
            ])

The issue is when I change the filter, the URL is changing, but the page is not rendering. If I reload the page with the changed URL, the filter result shows correctly.

After this I removed the ->searchable() and tried again, This time the filter worked after clicking outside the select filter, filter was not working when select onchange.

Thank you.

0 likes
4 replies
jeevamugunthan's avatar

Getting this error in chrome console, after the outside click

Alpine Expression Error: Cannot read properties of undefined (reading 'getElementsByClassName')

Expression: "const recordsOnPage = getRecordsOnPage()

                                            if (recordsOnPage.length && areRecordsSelected(recordsOnPage)) {
                                                $el.checked = true

                                                return 'checked'
                                            }

                                            $el.checked = false

                                            return null"

 <input type=​"checkbox" class=​"fi-checkbox-input rounded border-none bg-white shadow-sm ring-1 transition duration-75 checked:​ring-0 focus:​ring-2 focus:​ring-offset-0 disabled:​pointer-events-none disabled:​bg-gray-50 disabled:​text-gray-50 disabled:​checked:​bg-current disabled:​checked:​text-gray-400 dark:​bg-white/​5 dark:​disabled:​bg-transparent dark:​disabled:​checked:​bg-gray-600 text-primary-600 ring-gray-950/​10 focus:​ring-primary-600 checked:​focus:​ring-primary-500/​50 dark:​text-primary-500 dark:​ring-white/​20 dark:​checked:​bg-primary-500 dark:​focus:​ring-primary-500 dark:​checked:​focus:​ring-primary-400/​50 dark:​disabled:​ring-white/​10" wire:loading.attr=​"disabled" wire:target=​"gotoPage,nextPage,previousPage,removeTableFilter,removeTableFilters,reorderTable,resetTableFiltersForm,sortTable,tableColumnSearches,tableFilters,tableRecordsPerPage,tableSearch" wire:key=​"WeOF4p0B3sSI1Yx9WK4n.table.bulk_select_page.checkbox.18us017XgxKiSnx6" x-bind:checked=​"const recordsOnPage = getRecordsOnPage()​

                                            if (recordsOnPage.length && areRecordsSelected(recordsOnPage)​)​ {
                                                $el.checked = true

                                                return 'checked'
                                            }​

                                            $el.checked = false

                                            return null" x-on:click=​"toggleSelectRecordsOnPage">​
 Uncaught TypeError: Cannot read properties of undefined (reading 'getElementsByClassName')
    at Proxy.getRecordsOnPage (http://127.0.0.1:8000/js/filament/tables/components/table.js?v=3.2.0.0:1:1206)
    at eval (eval at safeAsyncFunction (http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:1243:21), <anonymous>:3:66)
    at [Alpine] const recordsOnPage = getRecordsOnPage()

                                            if (recordsOnPage.length && areRecordsSelected(recordsOnPage)) {
                                                $el.checked = true

                                                return 'checked'
                                            }

                                            $el.checked = false

                                            return null (eval at safeAsyncFunction (http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:1243:21), <anonymous>:13:59)
    at http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:1265:23
    at tryCatch (http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:1185:14)
    at http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:3437:19
    at Array.reactiveEffect (http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:2359:18)
    at flushJobs (http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:706:15)
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getElementsByClassName')
    at Proxy.getRecordsOnPage (http://127.0.0.1:8000/js/filament/tables/components/table.js?v=3.2.0.0:1:1206)
    at eval (eval at safeAsyncFunction (http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:1243:21), <anonymous>:3:66)
    at [Alpine] const recordsOnPage = getRecordsOnPage()

                                            if (recordsOnPage.length && areRecordsSelected(recordsOnPage)) {
                                                $el.checked = true

                                                return 'checked'
                                            }

                                            $el.checked = false

                                            return null (eval at safeAsyncFunction (http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:1243:21), <anonymous>:13:59)
    at http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:1265:23
    at tryCatch (http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:1185:14)
    at http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:3437:19
    at Array.reactiveEffect (http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:2359:18)
    at flushJobs (http://127.0.0.1:8000/livewire/livewire.js?id=4495682f:706:15)
arifhossen's avatar

I think there is a syntax issue. Please try this ->relationship('status.name') [ relationshipName.fieldName]

javparra's avatar

@arifhossen The method accepts two parameters, which is the name of the relationship and the field. How do you pass an array to it?

SelectFilter::make('user') ->label('Afiliado') ->relationship('user', 'full_name') ->searchable() ->multiple() ->preload()

Please or to participate in this conversation.