Reactivity: Order of operations?

[Estigy]

Package

Panel builder

Package Version

v4

How can we help you?

I have a form with two Selects.
When the value of the first Select changes, two things shall happen:

1. The second Select shall load a different set of options.
2. One of these new options should get selected.

The problem is that currently step 2 comes before step 1, and I don't know how to switch them around. (Or, to put it differently: Where to put my code so it will be executed in the correct order.)

Currently I use $field1->afterStateUpdated() to load the selected model and set the state of $field2.
And on $field2, I use a callback on ->options() to determine the set of options based on the state of $field1.

When you look at the code given at https://filamentphp.com/docs/4.x/forms/overview#dependant-select-options, how would it need to be changed so after changing the first select box to "Mobile development" (with value "mobile"), the second select box will not only load the two options for "mobile" but also has the entry of "Android development" preselected?

More Details (if anybody wants to read on):

What actually happens, is this:

1. I select an option in $field1.
2. $field1->afterstateUpdated() gets called, in there the value of $field2 is set to a value, let's say 3.
3. The callback for the options is called on $field2.
4. In this callback we find that the options consist of the following options: [3 => 3, 4 => 4, 5 => 5]
5. I would expect to get the option with value and label "3" selected.
6. Instead the option with value and label "5" gets selected - which is the 3rd (!) options, not the option with value 3.

I found out what is happening because the app simultaneously fills a TextEntry with the current data as well as selects the corresponding option in the select field where the user can chose another value. The app correctly shows the number 100, but the select box showed number 153 - and I wondered, why it would do that. At first I thought I might have used not the same numbers for keys and values, but that was ok. Then I found out that the options array had some values missing, and the number 153 that got selected was just the 100th option.

Now, maybe I'm doing something wrong and I have to somehow change the order of operations so that the options array is recalculated first and then the new value is being set. If somebody could tell me how to do that, I'm happy to try it out. especially as the new value that shall be set on that field might not be available there at first, but after recalculating the option it would be eventually.

Currently I set it to number 100 and get number 153 which does not look good at all ;-)