Using livewire defer, if input value has text the value is sent when pagination link is clicked- how to stop this?

Question

I'm using livewire with pagination. I set the input to defer so that the search is not carried out until the search button is clicked. However, I have also noticed that if I have any text in the search box that value is sent whenever a pagination button is clicked. I've tried setting the value to "" in jquery $(document).on("click", ".page-link", () => $( "#inlineFormInput" ).val("")); when a pagination buttton is click but that has not solved the problem. And actually clearing the value could cause other problems.

The desired result is that, if for some reason a user leaves text in the searchbox that value is not passed if the user changes their mind and just clicks a pagination link. The input value should only be passed when the search button is clicked. Any help would be greatly appreciated.

livewire component html:

<div id="searchBoxRow">
   <input wire:model.defer="search" wire:keydown.enter="updateFaculty" id="inlineFormInput" class="form-control" val="" type="search" autocomplete="off" placeholder="Seach for Name or Country" aria-label="Search">
    <button wire:click="updateFaculty" class="btn btn-primary" id="facultyCardsSearchButton" type="submit">
       <i class="bi bi-search button-icon"></i>
       <span class="button-text">Search</span>
   </button>
</div>

livewire php file:

<?php

namespace App\Http\Livewire;

use App\Models\Tag;
use App\Models\Faculty;
use Livewire\Component;
use Livewire\WithPagination;

class FacultyData extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    public $search = null;
    public $tagId = null;

    public function updateFaculty(){
        $search = $this->search;
        $tagId = $this->tagId;
        $this->emit('closeAutocomplete');
    }
    
    public function updatingSearch()
    {
        $this->resetPage();
    }
    
    public function render()
    {
        $tags = Tag::all(); 

        $allFaculty = Faculty::searchFilter([$this->search, $this->tagId])->with('country', 'tags')->paginate(10);

        return view('livewire.faculty-data', [
            'allFaculty' => $allFaculty,
            'tags' => $tags
        ]);
        
    }
}

Answer 1

Here is an idea. You can use the updatingPage() of the $page property hook. When performing the page switch clean the search property. But, somehow you need to check if this is a result of a searched data before or just the client has had his way...well, my idea is get a flagged property to tell livewire what to do. For example

public $searchFlag = false;

public function updateFaculty(){
   if ($this->search) // only of search has any value
      $this->searchFlag = true;

   // do 
}

public function updatingPage()
{
   if (! $this->searchFlag) {
      $this->reset(['search']);
   }
   if (! $this->search) {
      $this->reset(['searchFlag']);
   }
}