One character delay on column search

[mobunti]

Hi

I've just installed livewire tables on a brand new laravel 10 system and have added a column search but it seems to be one character behind on the searching

If Ive got 2 records with values of ABC and ABD in the column and type in an A in the column search, a livewire network request is made but there is no rerender as you would expect and likewise when I add a B so its now AB Im searching for, but when I type in a C as well so I have ABC it still shows both. If i then add a 4th character it then does the ABC filter and removes the ABD record and then the 5th character then applies the 4 character search and at this point both records are now not found, as expected.

Its as if the builder is running before the columnSearch has been updated with the additional character and in fact Ive added a dd within the builder()

        if (strlen($this->columnSearch["vrn"])>2) dd($this->columnSearch["vrn"]);

and when I hit the 4th key it comes up with the 3 character search string instead.

Any suggestions on what might be happening ?

Thanks

T

[lrljoe]

There are a few different config options for search. Keep in mind that your db will get queried with each character if you choose to use a non-debounced/non-lazy.

Can you share your configure() method, and if you are using the builder() approach, the contents of that?

Can you confirm whether you're tailwind or bootstrap (and version), package version, and Alpine version (and whether you're using a CDN, local or bundled? (If so - I'm assuming Vite?)

[mobunti]

Hi

Thanks for the quick reply. I based my code on the "advanced example" code on the main site and then pulled in other bits that looked like I needed them

    public function configure(): void
    {
        $this->setPrimaryKey('id')
            ->setAdditionalSelects(['marks.id as id'])
            ->setDebugEnabled()
            ->setConfigurableAreas([
                'toolbar-left-start' => ['marks.toolbar-left-start', ['param1' => true]]
            ])
            ->setTrAttributes(function($row, $index) {
                 return ['default' => true,
                 'class' => 'hover:bg-gray-100 dark:hover:bg-gray-900'];
             })
            ->setTdAttributes(function(Column $column, $row, $columnIndex, $rowIndex) {
                $return = [];
                if ($column->isField('selling_price') ) {
                    $return["class"] = 'text-right cursor-pointer';
                }
                else {
                    $return["class"] = 'cursor-pointer';
                }
                if ($column->isField('vrn') ||
                    $column->isField('alpha_block_1') ||
                    $column->isField('numeric_block_1') ||
                    $column->isField('alpha_block_2') ||
                    $column->isField('primary_alpha') ||
                    $column->isField('source') ||
                    $column->isField('selling_price')  ) {
                    $return['onclick'] = "Livewire.emit('openModal', 'edit-mark-modal',[".$row->id."])";
                }
                return $return;

            })
            ->setSingleSortingDisabled()
            ->setComponentWrapperAttributes([
                 'id' => 'mark-table',
             ])
            ->setEmptyMessage('No marks found')
            ->setDefaultSort('primary_alpha', 'asc')
            ->setRememberColumnSelectionEnabled()
            ->setSecondaryHeaderTrAttributes(function($rows) {
                return ['class' => 'bg-gray-100'];
            })
            ->setSecondaryHeaderTdAttributes(function(Column $column, $rows) {
                if ($column->isField('vrn')) {
                    return ['class' => 'text-red-500'];
                }

                return ['default' => true];
            })
            ->setFooterTrAttributes(function($rows) {
                return ['class' => 'bg-gray-100'];
            })
            ->setFooterTdAttributes(function(Column $column, $rows) {
                if ($column->isField('vrn')) {
                    return ['class' => 'text-green-500'];
                }

                return ['default' => true];
            })
            ->setUseHeaderAsFooterEnabled()
            ->setHideBulkActionsWhenEmptyEnabled();
    }

    public function builder(): Builder
    {
        return Mark::query()
            ->where("marks.vrn","like","%".$this->columnSearch["vrn"]."%");
    }

(just for clarification, when i add a dd just before the return on the builder, the columnSearch["vrn"] is always one character behind where it should be)

Alpine 3.12.3 with Tailwind 3.1.0 and livewire 2.12 (on Laravel 10.10) and yes, vite (4.0.0)

I literally started building the site a few days ago so everything should be the latest version

I will look at adding the debounce once its searching after the keystroke is stored rather than before - didnt want to complicate things

Thanks for any guidance

T

[lrljoe]

You are indeed correct.

It's an oddity with how everything loads in!

Rather than using the builder() function to set a search, either just set searchable() on the appropriate column, or you can use a callback on any column if you want:

Column::make('Name')
    ->searchable(
        fn(Builder $query, $searchTerm) => $query->orWhere("marks.vrn","like","%".$searchTerm."%")
    ),

That should keep in sync, much more smoothly. It applies to the filters as well, so make sure to use the filter() callback on the filter itself rather than using a when() statement in the builder!

Tables V3 is almost ready, and uses Livewire 3 by the way, but I'll likely backport some code to V2 and do some fixes to the v2 branch.

[lrljoe]

And I hasten to add, v3 doesn't have the same issue!

[mobunti]

Hi

Thanks for the quick response. I think Im working now but just need to do some more checks. When do you think v3 support might be available ? I know Livewire 3 is beta 7 at the moment so not actually released but Im guessing that not much will change between now and release. Wondering if its worthwhile me holding on for a bit longer or whether you think upgrading to a v3 compatible system will be a simple affair ? I know one of the big changes on Livewire 3 is the default changing from live interaction to either defer or lazy by default but I don't know how many other changes there are that will affect an existing installation

Thanks again for your guidance

T

[lrljoe]

There's a fair few breaking changes, which we've mostly worked through. It's getting close to a beta-stage for this package, but we won't go "stable" until Livewire v3 does.

We'll most likely announce any dates on the official Discord first, but we're talking days/week(s) rather than anything longer.