Problem with 2 level dependent dropdown in Livewire 3

@vincent15000 thanks, I will try and send the code (i am ukrainian)

@vincent15000 Hi Vincent. Cuisine and Menu are french words that have been absorbed into the english language Like cafe and gateaux.

@vincent15000 So I've added @dump($dishCategories) and @dump($dishes) into my view. I've prepaired some images so it'll look more clear

1. Fresh selector (https://i.ibb.co/2YHw7Vw1/fresh-selector.jpg)

Illuminate\Database\Eloquent\Collection {#1051 ▼ // resources\views/livewire/filter.blade.php
  #items: array:13 [▶]
  #escapeWhenCastingToString: false
}
Illuminate\Support\Collection {#1960 ▼ // resources\views/livewire/filter.blade.php
  #items: []
  #escapeWhenCastingToString: false
}

2. Selectors with data (https://i.ibb.co/pB4fLXXF/selector-with-data.jpg)

Illuminate\Database\Eloquent\Collection {#1126 // resources\views/livewire/filter.blade.php
  #items: array:13 []
  #escapeWhenCastingToString: false
}
Illuminate\Database\Eloquent\Collection {#1133 // resources\views/livewire/filter.blade.php
  #items: array:1 []
  #escapeWhenCastingToString: false
}

3. After redirect to another page (https://i.ibb.co/VYk1YNBC/after-redirect.jpg). I also added dump($request); to my FilterController to debug query parameters from form with selectors:

Illuminate\Database\Eloquent\Collection {#935 ▼ // resources\views/livewire/filter.blade.php
  #items: array:13 [▶]
  #escapeWhenCastingToString: false
}
Illuminate\Support\Collection {#1868 ▼ // resources\views/livewire/filter.blade.php
  #items: []
  #escapeWhenCastingToString: false
}

FilterController.php:

class FilterController extends Controller
{
    public  function filter(Request $request)
    {
        dump($request);

        return view('recipes.recipes');
    }
}

4. And after returning to the previous page I see the problem (https://i.ibb.co/pvN5j3tR/problem-again.jpg)

Illuminate\Database\Eloquent\Collection {#1051 ▼ // resources\views/livewire/filter.blade.php
  #items: array:13 [▶]
  #escapeWhenCastingToString: false
}
Illuminate\Support\Collection {#1960 ▼ // resources\views/livewire/filter.blade.php
  #items: []
  #escapeWhenCastingToString: false
}

@Dmytro_Shved Hmmm ... are you really redirecting to another page ?

After redirect to another page

Where is this redirection in your code ?

And after returning to the previous page I see the problem

How do you return to the previous page ?

@Snapey Oh great ;) ... I didn't know ... like basket, foot, dressing, ... into the french language ;) ... even though dressing has a completely different definition in french.

@vincent15000 I am redirecting to page recipes.blade.php using form button:

<!-- Filter button -->
        <div class="...">
            <button type="submit" class="..."> Filter </button>
        </div>

and this form action looks like this:

<form action="{{ route('filter') }}" method="GET">

And here is my route:

Route::get('/recipes', [FilterController::class, 'filter'])->name('filter');

I go back to the previous page using the arrows in the browser

@vincent15000 How do I proceed if I go back to the previous page using the arrows in the browser (and I think the component is breaking because of the browser cache)

@Dmytro_Shved I get some similar errors when using the arrows in the browser. I don't have found how to solve this problem.

Are you using Livewire v2 or v3 ? If v3, are you using computed properties ?

@vincent15000 I am using livewire 3.

I also tried computed properties, but actually it was a start point with my problem, after that I tried 2-3 different code logic but I got same problem.

I've never encountered anything like this.

And I was suprised that nobody uses depending dropdowns in filter (at least I didn’t find such a video where someone would do similar code)

@vincent15000 Additionally, when I am turning off Caching in F12 -> Network -> 'Disable cache' it solves the problem, but I can’t just disable the cache for the entire site; in any case, the user will use it so as not to reload pages every time

Hello @vincent15000

I found a solution! I have added autocomplete="off" attribute to my <select> and It's working!

The problem was in the browser autocomplete the form

Now after returning to previous page using arrow back in browser my selectors are clear!