X-select value automatically change

[Uhasith]

Hey, I'm using a Drawer and inside that drawer, I have a child component for a table view. basically, I divided the same form into two pages. I conditionally render two parts using the Next and previous buttons. After I go back to the second page comeback to the first page and then change a value inside my select input it will start to send infinite network requests and the select field value changes continuously.

<div wire:key="Office"> <x-select x-on:selected="@this.setOffice($event.detail.value)" x- on:clear="@this.resetOffice" label="{{ __('Select Office') }}" wire:model="office_id" :async-data="[ 'api' => route('office.search'), 'method' => 'POST', 'params' => ['selected' => $office_id], 'alwaysFetch' => false, ]" always-fetch="false" option-label="name" placeholder="{{ __('Select Office') }}" option-value="id"> </x-select> </div>

    ` public function setOffice($id){
          $this->office_id = $id;
       }

    public function resetOffice(){
        $this->office_id = null;
      }`

   ` public function officeSearch(Request $request)
    {

        $offices = $this->getAccessibleOffices();
        return Office::query()
            ->select('id', 'name')
            ->whereIn('id', $offices)
            ->orderBy('name')
            ->when(
                $request->exists('selected') && !empty($request->input('selected')) && empty(
               $request->input('search')),
                fn (Builder $query) => $query->whereIn('id', [$request->input('selected')]),
            )
            ->when(
                $request->exists('organisation_id') && !empty($request->input('organisation_id')) && 
                !empty($request->input('search')),
                fn (Builder $query) => $query->where('organisation_id', [$request->input('organisation_id')])
                ->where([['name', 'like', "%{$request->input('search')}%"]]),
                fn (Builder $query) => $query->limit(10)
            )
            ->when(
                $request->exists('organisation_id') && !empty($request->input('organisation_id')),
                fn (Builder $query) => $query->where('organisation_id', [
                $request->input('organisation_id')]),
                fn (Builder $query) => $query->limit(10)
            )
            ->get();
    }`

https://github.com/wireui/wireui/assets/78094049/7bdf9b46-2ea2-4ab2-874a-d1f42b6c3e4e

[Uhasith]

@PH7-Jack Do you have any idea about this mate? It's really disturbing in my every project. 😢

[Uhasith]

can anyone give a solution for this?

[joaopalopes24]

Thank you for using WireUi!

We released stable version 2, with new features and improvements. Check if the mentioned problem has been resolved, if not, reopen this issue and we will provide more information. Thank you in advance, we are organizing Issues for better maintenance.