Skip to content

Sync bugs between clients for switch and dropdown nodes #1569

@JanarT19

Description

@JanarT19

Current Behavior

Most input nodes sync their state automatically between clients, except for 2 nodes: switch and dropdown:

  • Switch doesn't update it's state (after the other client refreshes their page, the new state appears)
  • Dropdown shows the value, not the label.

See the example below:

node-red-dashboard-v2-bugs

Note: I already disabled "Accept Client Data" to make sure it's not that feature's issue.

Expected Behavior

Similar to other UI input nodes, the current state should be synced across clients.

Steps To Reproduce

Click here to see Node-RED code to add the dashboard input elements I experimented with.

[{"id":"2c4b10c9418e20a0","type":"ui-switch","z":"2f6005edc8c35772","g":"24f622db8255ec77","name":"","label":"switch","group":"9175fc7922df7e84","order":3,"width":"2","height":"1","passthru":false,"decouple":false,"topic":"topic","topicType":"msg","style":"","className":"","layout":"row-spread","clickableArea":"switch","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":250,"y":1420,"wires":[["f183846e2fad6f5c"]]},{"id":"d2396a807bfa681c","type":"ui-text-input","z":"2f6005edc8c35772","g":"24f622db8255ec77","group":"9175fc7922df7e84","name":"","label":"text","order":4,"width":"2","height":"1","topic":"topic","topicType":"msg","mode":"text","tooltip":"","delay":300,"passthru":false,"sendOnDelay":false,"sendOnBlur":true,"sendOnEnter":true,"className":"","clearable":false,"sendOnClear":false,"icon":"","iconPosition":"left","iconInnerPosition":"inside","x":250,"y":1460,"wires":[["f183846e2fad6f5c"]]},{"id":"d3ff528afb67d297","type":"ui-slider","z":"2f6005edc8c35772","g":"24f622db8255ec77","group":"9175fc7922df7e84","name":"","label":"slider","tooltip":"","order":5,"width":"2","height":"1","passthru":false,"outs":"end","topic":"topic","topicType":"msg","thumbLabel":"true","showTicks":"always","min":0,"max":10,"step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","showTextField":false,"x":250,"y":1660,"wires":[["f183846e2fad6f5c"]]},{"id":"07c9561352b9d806","type":"ui-button","z":"2f6005edc8c35772","g":"24f622db8255ec77","group":"9175fc7922df7e84","name":"","label":"button","order":2,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":250,"y":1700,"wires":[["f183846e2fad6f5c"]]},{"id":"f183846e2fad6f5c","type":"debug","z":"2f6005edc8c35772","g":"24f622db8255ec77","name":"debug","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":430,"y":1480,"wires":[]},{"id":"94bbe49d46af211e","type":"ui-number-input","z":"2f6005edc8c35772","g":"24f622db8255ec77","group":"9175fc7922df7e84","name":"","label":"number","order":6,"width":"2","height":"1","topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"tooltip":"","passthru":false,"sendOnBlur":true,"sendOnEnter":true,"className":"","clearable":true,"icon":"","iconPosition":"left","iconInnerPosition":"inside","spinner":"default","x":260,"y":1500,"wires":[["f183846e2fad6f5c"]]},{"id":"b473c1190ef79663","type":"ui-button-group","z":"2f6005edc8c35772","g":"24f622db8255ec77","name":"","group":"9175fc7922df7e84","order":7,"width":"2","height":1,"label":"button group","className":"","rounded":true,"useThemeColors":true,"passthru":false,"options":[{"label":"Option 1","icon":"","value":"1","valueType":"str","color":"#009933"},{"label":"Option 2","icon":"","value":"2","valueType":"str","color":"#999999"}],"topic":"topic","topicType":"msg","x":270,"y":1540,"wires":[["f183846e2fad6f5c"]]},{"id":"2e2c48a1f1bebfd9","type":"ui-dropdown","z":"2f6005edc8c35772","g":"24f622db8255ec77","group":"9175fc7922df7e84","name":"","label":"dropdown","tooltip":"","order":8,"width":"2","height":"1","passthru":false,"multiple":false,"chips":false,"clearable":false,"options":[{"label":"Option 1","value":"1","type":"str"},{"label":"Option 2","value":"2","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","typeIsComboBox":true,"msgTrigger":"onChange","x":260,"y":1580,"wires":[["f183846e2fad6f5c"]]},{"id":"2019eca5b0075350","type":"ui-radio-group","z":"2f6005edc8c35772","g":"24f622db8255ec77","group":"9175fc7922df7e84","name":"","label":"radio group","order":9,"width":"2","height":"1","columns":1,"passthru":false,"options":[{"label":"Option 1","value":"1","type":"str"},{"label":"Option 2","value":"2","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":270,"y":1620,"wires":[["f183846e2fad6f5c"]]},{"id":"9175fc7922df7e84","type":"ui-group","name":"Authentication example #1","page":"6de5701be6942806","width":"5","height":"5","order":3,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"6de5701be6942806","type":"ui-page","name":"Authentication","ui":"809d0ce29fe03a4b","path":"/auth","icon":"lock","layout":"notebook","theme":"c2ff5ba1f92a0f0e","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"809d0ce29fe03a4b","type":"ui-base","name":"Dashboard 2.0","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-form","ui-text","ui-notification","ui-template","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"icon","titleBarStyle":"fixed","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true},{"id":"c2ff5ba1f92a0f0e","type":"ui-theme","name":"Test theme","colors":{"surface":"#98ecd9","primary":"#98ecd9","bgPage":"#f5f5f5","groupBg":"#ffffff","groupOutline":"#b0b0b0"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}}]

Environment

  • Dashboard version: 1.21.0
  • Node-RED version: 4.0.2
  • Node.js version: 20.16.0
  • npm version: 10.8.1
  • Platform/OS: Linux
  • Browser: Brave

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingneeds-triageNeeds looking at to decide what to do

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions