Merge pull request #10546 from filamentphp/feature/search-on-blur

feature: Search on blur

packages/tables/docs/03-columns/01-getting-started.md

@@ -253,6 +253,23 @@ public static function table(Table $table): Table
 }
 ```
 
+### Searching when the input is blurred
+
+Instead of automatically reloading the table contents while the user is typing their search, which is affected by the [debounce](#customizing-the-table-search-debounce) of the search field, you may change the behaviour so that the table is only searched when the user blurs the input (tabs or clicks out of it), using the `searchOnBlur()` method:
+
+```php
+use Filament\Tables\Table;
+
+public static function table(Table $table): Table
+{
+    return $table
+        ->columns([
+            // ...
+        ])
+        ->searchOnBlur();
+}
+```
+
 ### Persist search in session
 
 To persist the table or individual column search in the user's session, use the `persistSearchInSession()` or `persistColumnSearchInSession()` method:

packages/tables/resources/views/components/search-field.blade.php

@@ -4,12 +4,13 @@
 
 @props([
     'debounce' => '500ms',
+    'onBlur' => false,
     'placeholder' => __('filament-tables::table.fields.search.placeholder'),
     'wireModel' => 'tableSearch',
 ])
 
 @php
-    $wireModelAttribute = "wire:model.live.debounce.{$debounce}";
+    $wireModelAttribute = $onBlur ? 'wire:model.blur' : "wire:model.live.debounce.{$debounce}";
 @endphp
 
 <div
@@ -33,9 +34,10 @@
                     'inlinePrefix' => true,
                     'placeholder' => $placeholder,
                     'type' => 'search',
-                    $wireModelAttribute => $wireModel,
                     'wire:key' => $this->getId() . '.table.' . $wireModel . '.field.input',
+                    $wireModelAttribute => $wireModel,
                     'x-bind:id' => '$id(\'input\')',
+                    'x-on:keyup' => 'if ($event.key === \'Enter\') { $wire.$refresh() }',
                 ])
             "
         />

packages/tables/resources/views/index.blade.php

@@ -39,6 +39,7 @@
     $isReordering = $isReordering();
     $isColumnSearchVisible = $isSearchableByColumn();
     $isGlobalSearchVisible = $isSearchable();
+    $isSearchOnBlur = $isSearchOnBlur();
     $isSelectionEnabled = $isSelectionEnabled() && (! $isGroupsOnly);
     $recordCheckboxPosition = $getRecordCheckboxPosition();
     $isStriped = $isStriped();
@@ -55,6 +56,7 @@
     $hasHeaderToolbar = $isReorderable || $areGroupingSettingsVisible || $isGlobalSearchVisible || $hasFiltersDialog || $hasColumnToggleDropdown;
     $pluralModelLabel = $getPluralModelLabel();
     $records = $isLoaded ? $getRecords() : null;
+    $searchDebounce = $getSearchDebounce();
     $allSelectableRecordsCount = ($isSelectionEnabled && $isLoaded) ? $getAllSelectableRecordsCount() : null;
     $columnsCount = count($columns);
     $reorderRecordsTriggerAction = $getReorderRecordsTriggerAction($isReordering);
@@ -201,7 +203,8 @@
 
                         @if ($isGlobalSearchVisible)
                             <x-filament-tables::search-field
-                                :debounce="$getSearchDebounce()"
+                                :debounce="$searchDebounce"
+                                :on-blur="$isSearchOnBlur"
                                 :placeholder="$getSearchPlaceholder()"
                             />
                         @endif
@@ -819,7 +822,8 @@
                                 >
                                     @if ($column->isIndividuallySearchable())
                                         <x-filament-tables::search-field
-                                            :debounce="$getSearchDebounce()"
+                                            :debounce="$searchDebounce"
+                                            :on-blur="$isSearchOnBlur"
                                             wire-model="tableColumnSearches.{{ $column->getName() }}"
                                         />
                                     @endif

packages/tables/src/Table/Concerns/CanSearchRecords.php

@@ -17,6 +17,8 @@ trait CanSearchRecords
 
     protected ?string $searchDebounce = null;
 
+    protected bool | Closure $isSearchOnBlur = false;
+
     public function persistSearchInSession(bool | Closure $condition = true): static
     {
         $this->persistsSearchInSession = $condition;
@@ -119,4 +121,16 @@ trait CanSearchRecords
     {
         return $this->searchDebounce ?? '500ms';
     }
+
+    public function searchOnBlur(bool | Closure $condition = true): static
+    {
+        $this->isSearchOnBlur = $condition;
+
+        return $this;
+    }
+
+    public function isSearchOnBlur(): bool
+    {
+        return (bool) $this->evaluate($this->isSearchOnBlur);
+    }
 }