Incorrect Behavior: Search box reloads, which loses focus

[jjrohrer]

When typing in the search box, it gets reloaded from blade after a successful search. The expected behavior would be for only the table and and pagination to be reloaded.

(BTW - I love the package - good work)

[hgferreira]

Yes, I confirm this one also! In fact is really hard to add something after the search is deployed and will have to wait a long time and make some tries before its possible again to write something in the search box.

Cheers

[KenKodz]

You can disable this by setting $disableSearchOnLoading to false. In your table component, add the following:

public function __construct($id)
{
    parent::__construct($id);
    $this->disableSearchOnLoading = false;
}

[jjrohrer]

Awesome.
Seems like this should be the default behavior. I'm trying to think of when you wouldn't want it.

[KenKodz]

I agree with you. It's nice to have an indication that the table is searching for the data, but disabling the search input isn't friendly at all. I'm going to be changing this in the app I am building with this package. If I come up with something "spiffy", I'll submit a PR.

[KenKodz]

Another option is to self-publish the views and edit it.

Currently there is no way to publish the views from this package via an artisan command. However, I have submitted a pull request to make it possible.

Until the pull request is approved, you can manually copy everything in vendor/rappasoft/laravel-livewire-tables/resources/views/ to resources/views/vendor/laravel-livewire-tables/.

The file you'll want to edit is resources/views/vendor/laravel-livewire-tables/includes/_options.blade.php.

@if ($searchEnabled)
    <div class="col">
        <input
            @if (is_numeric($searchDebounce)) wire:model.debounce.{{ $searchDebounce }}ms="search" @endif
            @if ($disableSearchOnLoading) wire:loading.attr="disabled" @endif
            class="form-control"
            type="text"
            placeholder="{{ $searchLabel }}"
        />
    </div>
@endif

Just remove the line that has @if ($disableSearchOnLoading) wire:loading.attr="disabled" @endif

[jjrohrer]

I'm experimenting with something like this...

` abstract class ThemedTable extends TableComponent { use Sorting; use Search;

public function __construct($id)
{
    parent::__construct($id);
    $this->disableSearchOnLoading = false;
}

`

[MartinP7r]

You can disable this by setting $disableSearchOnLoading to false. In your table component, add the following:

public function __construct($id)
{
    parent::__construct($id);
    $this->disableSearchOnLoading = false;
}

Somehow this solution is working only after the first search. The first search still loses focus for me.

edit: "first search" being the first successful search after a full page reload

[rappasoft]

I'll disable that by default and add a loading indicator.

[rappasoft]

Added in next version