checkboxes and icons disappear on search - laravel

Question

I am using livewire components but when begin typing in the search input field, the checkboxes and icons in the component disappear, and they only reappear after refreshing the page. What could be the cause of this behaviour?
Blade view
<div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
<div>
<h4 class="mb-3 mb-md-0">User Roles</h4>
</div>
<div class="d-flex align-items-center flex-wrap text-nowrap">
<div class="form-inline">
<div class="input-group mr-2 mb-2 mb-md-0 d-md-non d-xl-flex">
<input type="text" wire:model="search" class="form-control" placeholder="Search role...">
</div>
<div class="input-group mr-2 mb-2 mb-md-0 mt-3 d-md-non d-xl-flex">
<select wire:model="sortAsc" class="form-control form-control-s mb-3">
<option value="1">Ascending</option>
<option value="0">Descending</option>
</select>
</div>
<div class="input-group mr-2 mb-2 mb-md-0 mt-3 d-md-non d-xl-flex">
<select wire:model="perPage" class="form-control form-control-s mb-3">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</div>
</div>
<a href="{{ route('create-role') }}" class="btn btn-success btn-icon-text mr-2 mb-2 mb-md-0">
<i class="btn-icon-prepend" data-feather="plus"></i>
Add Role
</a>
<button wire:click="deleteRoles" type="button" class="btn btn-danger btn-icon-text mb-2 mb-md-0">
<i class="btn-icon-prepend" data-feather="trash-2"></i>
Delete Role
</button>
</div>
</div>
</div>
<div class="card-body">
#if (count($roles) > 0)
<div class="table-responsive">
<table id="dataTableExample" class="table">
<thead>
<tr>
<th></th>
<th>#</th>
<th>Display Name</th>
<th>Description</th>
<th>Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach ($roles as $role)
<tr wire:key="{{ $role->name }}">
<td>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" wire:model="selectedRoles.{{ $role->id }}" class="form-check-input">
</label>
</div>
</td>
<td>{{ $role->id }}</td>
<td>{{ $role->display_name }}</td>
<td>{{ $role->description }}</td>
<td>{{ $role->created_at->diffForHumans() }}</td>
<td>
<a href="{{ route('edit-role', $role->name) }}" class="btn btn-primary btn-icon-text mr-2 mb-2 mb-md-0">
<i class="btn-icon-prepend" data-feather="edit-2"></i>
Edit
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
<div>{{ $roles->links() }}</div>
</div>
#else
<p>No user roles found.</p>
#endif
</div>
</div>
</div>
</div>
</div>
Corresponding livewire component
<?php
namespace App\Http\Livewire\Roles;
use Livewire\Component;
use App\Models\Role;
use Livewire\WithPagination;
class Index extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public $selectedRoles = [];
public $search = '';
public $perPage = 10;
public $sortField = 'id';
public $sortAsc = true;
public function render()
{
return view('livewire.roles.index', [
'roles' => Role::search($this->search)
->orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')
->simplePaginate($this->perPage)
])
->extends('layout.master');
}
public function createRole(){
return view('livewire.roles.create')
->extends('layout.master');
}
public function deleteRoles(){
Role::destroy($this->selectedRoles);
}
}
What could be causing this issue?

Answer 1

try changing this lines, actually I use this like livewire documentation
'roles' => Role::where('someColumn','like','%'.$this->search.'%')
orWhere('anotherColumn','like','%'.$this->searchTerm.'%')
->orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')
->paginate($this->perPage)