I have an Option (drop-down) component that works fine most of the time, but then gets into a weird state, where calling .setValue() does seem to change the internal value, but the displayed text no longer changes. The component is query-backed (mapped), from a retool database query with no parameters, and set to 'automatic'.
I've watched it in the debug pane, and the Option component's state indicates that all of the following are changing as expected: .value, .selectedIndex, .selectedLabel, .selectedItem -- and yet the value visible in the page is old and unchanging.
I suspect this has something to do with the following flow:
- selecting a record to edit
- populating the form (including this component, via .setValue)
- changing the value in the component
- saving changes to the current record
5.a reloading the current record (so doing a .setValue on the component again)
5.b calling .trigger() on the query that populates the component, because the save may have modified the available options
5a and 5b likely happen concurrently. (Upon further testing, 5b may be a red herring.)
Once it gets into this weird state, the component becomes difficult to use; it does have a value, just not the one it appears to have. No matter how many times .setValue() is called afterwards, it continues to display an old label, while its internal values change correctly. Reloading the app gets back into a fine state.
Cloud 3.155.0 -- unsure whether this was happening on any previous versions.
.clearValue() and .resetValue() did not help.
I tried using a single JS script to react to successful saving by await'ing between the two refreshes, that didn't help.
I artificially added a delay between the two, that didn't help.
I thought at first that if I did NOT .trigger() the query that provides values to the component, the problem went away. Upon further testing, that doesn't seem to be true after all. (Would have been an okay workaround for now, as important changes are relatively rare.)