Description
I have a UI that has 3 components (dropdowns), A, B, C that can each change independently but the values of B are based on A and the values of C are based on B (all of which is defined in a table; see example below). Right now, I have 2 separate @reactive.effect-decorated functions (but without a @reactive.event restriction) that update the options in B when something changes and the options in C when something changes. My issue is that sometimes C updates before B when A changes because there's no strict rule stating otherwise. How do I solve this issue?
If I attached a @reactive.event on A to change the options in B and a @reactive.event on B to change the options in C, then a change in A that happens to have an identical B option will not trigger an update on C. For example consider the following minimal table:
| A | B | C |
|---|---|---|
| one | 0 | foo |
| one | 1 | fa |
| two | 3 | bar |
If A has "one" selected and I switch it to "two" I would like C to give "bar" as the only option. This is only possible if C can update either when B changes or A changes but there's no rule stating that B should update before C does.
If I have no @reactive.event restrictions then sometimes C updates before B and I get an erroneous lookup for, e.g. A == "two" and B == 0 and C =="bar"
How do I force reactive order to be A --> B --> C? Hope this makes some sense.