Dropdown widget loses it’s entries when switching tabs

[natcl]

Current Behavior

I’m setting the options of a dropdown widget at startup using msg.options which works fine. If I switch to another tab and switch back the entries are gone, they don’t seem to persist.

Expected Behavior

I would expect the options to persist between tab changes.

Steps To Reproduce

Inject options via msg.options at startup on a widget on tab A. Switch to tab B and come back to tab A, options are now gone.

Environment

• Dashboard version: 1.13.0
• Node-RED version: 4.0.2
• Node.js version: 20.15.1
• npm version:
• Platform/OS: Alpine 3.20
• Browser: Safari

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[natcl]

Slack conversation here:
https://node-red.slack.com/archives/C1DH77X1V/p1721421443800439

[joepavitt]

Can reproduce. Oddly, the dynamic data is correctly stored server-side, and persists - you can check this by looking at our behind-the-scenes debug view at your-instance:1880/dashboard/_debug

So this suggests that the problem is that the widget-load event isn't correctly firing on a page-switch such that we load the latest state with updated options. Even as a backup though, we should have this data stored in the VueX store on the client-side, so it should have two backups... but neither of which are functioning correctly.

@gayanSandamal can you investigate the details when you have a chance please?

[gayanSandamal]

@joepavitt I'll investigate this further

[arturv2000]

Just my 2cents, this is an issue similar to what happens in other widgets, the onLoad event may not handle / update the msg.ui_update properties, and the event onDynamicProperties not being "triggered" independently when the widget is loaded.

a possible fix is:

onLoad (msg) {
    // update vuex store to reflect server-state
    this.$store.commit('data/bind', {
        widgetId: this.id,
        msg
    })
    this.onDynamicProperties(msg)  // Get the `ui_update` properties that may exist for this widget at load time, until is properly handled in `data_tracker.mjs`, needs to be called before `this.select`
    this.select(this.messages[this.id]?.payload)
},

To make sure we load the ui_update values correctly on widget-load event, this only works well if the last message sent to the widget has all the ui_update values. This should be handled better in data-tracjer.mjs (I think) in order to fetch the stored properties for ui_update, don't know if data-tracker is the best place for this action or if it better to be on widget.js.

[colinl]

Should not the ui_update changes be saved in the statestore so that they are are sent up when the widget connects after a page change?

[joepavitt]

Should not the ui_update changes be saved in the statestore so that they are are sent up when the widget connects after a page change?

They are saved, but my downfall right now is not including the statestore content in the onLoad function call, which I definitely need to do as @arturv2000 mentioned.

@gayanSandamal this has links to a few other discussions, etc. I've been involved in over the past few weeks, so I'll likely take this one back off your hands as it could be quite the beast.