Setting temporary state is one update behind with multiple events

This one was a bear to track down. I have a select box that sets a temporary state value on change. However, it was always one event behind. i.e. If you select "Option 1" the state would be null. If you changed the selection to "Option 2" it would set the state to "Option 1".

I realized it occurred when a second change event was on the select box. The order of events is irrelevant. I've attached a demo app that reproduces the error.

tempstatetest.json (12.2 KB)

This same issue occurs if using localstorage.

Hi @andy.barilla,

I can tell this one was a difficult one to track down! It took some playing around but I was able to import your app and reproduce what you've mentioned. I went ahead and created a bug report for our team. I'll continue to keep you updated on a fix for the temporary state. Thanks for bringing up this bug! This goes a long way in helping us improve our product!

I tested out the localStorage but wasn't able to reproduce the issue. Is there something different that you're doing compared to the issue with temporary state (different component, event handler, modules, etc)?

@Kenny Thanks for looking into this! I am currently struggling with the same issue and wasn't sure if that's the correct behaviour or not.

I would like to run a query after a temporary state variable has been updated (because that temporary state is an "input" for the query). Currently, tempState.setValue() looks like it runs asynchronously and updates the data too late for my use case.

Maybe the current behaviour is a good default for most cases, but having the option to wait for the temporary state update to complete would be useful (maybe similar to a Promise or like the onSuccess call back in query.trigger()).

Hey @goetz, If you select "Keep variable references inside the query in sync with your app." on the Advanced tab of the query editor for the JS query where you're updating the Temp State variable, then you should be able to reference the updated value of the Temp State variable in your script.
\

Hope that helps!

Thanks, I should try! My workaround was simpler: instead of one component with a shared state, I've created several components (copies essentially) that don't share a state.