node-red
ui form node is not filled on not-default tabs
What are the steps to reproduce?
Create two tabs with each containing a form node. Fill their fields dynamically, e.g. inject timestamp once and set the fields using a function.
Open the dashboard. The fields of the form on the default tab are filled (check).
Switch to the second tab. The fields there are empty but shouldn't.
However, while the second tab is selected and you refresh the dashboard via your browser, the fields are set correctly.
Relates to: #479
https://user-images.githubusercontent.com/16558026/103799578-90f9ee80-504b-11eb-84df-fd3b57cd56bd.mov
You can use the following flow to reproduce:
[ { "id": "798f73e4.a55b6c", "type": "tab", "label": "Flow 1", "disabled": false, "info": "" }, { "id": "62686bb.69a5894", "type": "ui_text", "z": "798f73e4.a55b6c", "group": "5476f1c.1f50a1", "order": 1, "width": 0, "height": 0, "name": "", "label": "Tab1", "format": "Works", "layout": "row-spread", "x": 310, "y": 120, "wires": [] }, { "id": "4d3ca26.6766d5c", "type": "ui_form", "z": "798f73e4.a55b6c", "name": "", "label": "", "group": "5476f1c.1f50a1", "order": 2, "width": 0, "height": 0, "options": [ { "label": "Field1", "value": "field1", "type": "text", "required": false, "rows": null }, { "label": "Field2", "value": "field2", "type": "text", "required": false, "rows": null } ], "formValue": { "field1": "", "field2": "" }, "payload": "", "submit": "submit", "cancel": "cancel", "topic": "", "x": 750, "y": 160, "wires": [ [] ] }, { "id": "f8da4214.8b7a", "type": "function", "z": "798f73e4.a55b6c", "name": "", "func": "let timestamp = msg.payload;\nreturn {\n payload: {\n \"field1\": \"Value1 \" + timestamp,\n \"field2\": \"Value2 \" + timestamp\n }\n}", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "x": 540, "y": 160, "wires": [ [ "4d3ca26.6766d5c" ] ] }, { "id": "7958d6b9.25aad8", "type": "inject", "z": "798f73e4.a55b6c", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": true, "onceDelay": 0.1, "topic": "", "payload": "", "payloadType": "date", "x": 350, "y": 160, "wires": [ [ "f8da4214.8b7a" ] ] }, { "id": "8d0a5a14.62cb28", "type": "ui_text", "z": "798f73e4.a55b6c", "group": "849ffeda.40e4", "order": 1, "width": 0, "height": 0, "name": "", "label": "Tab2", "format": "Does not work", "layout": "row-spread", "x": 310, "y": 260, "wires": [] }, { "id": "17d169bc.3530e6", "type": "ui_form", "z": "798f73e4.a55b6c", "name": "", "label": "", "group": "849ffeda.40e4", "order": 2, "width": 0, "height": 0, "options": [ { "label": "Field1", "value": "field1", "type": "text", "required": false, "rows": null }, { "label": "Field2", "value": "field2", "type": "text", "required": false, "rows": null } ], "formValue": { "field1": "", "field2": "" }, "payload": "", "submit": "submit", "cancel": "cancel", "topic": "", "x": 750, "y": 300, "wires": [ [] ] }, { "id": "8abb8821.373238", "type": "function", "z": "798f73e4.a55b6c", "name": "", "func": "let timestamp = msg.payload;\nreturn {\n payload: {\n \"field1\": \"Value1 \" + timestamp,\n \"field2\": \"Value2 \" + timestamp\n }\n}", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "x": 540, "y": 300, "wires": [ [ "17d169bc.3530e6" ] ] }, { "id": "f2586ade.733338", "type": "inject", "z": "798f73e4.a55b6c", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": true, "onceDelay": 0.1, "topic": "", "payload": "", "payloadType": "date", "x": 350, "y": 300, "wires": [ [ "8abb8821.373238" ] ] }, { "id": "5476f1c.1f50a1", "type": "ui_group", "name": "Group 1", "tab": "d14867ca.4a8e08", "order": 1, "disp": true, "width": "6", "collapse": false }, { "id": "849ffeda.40e4", "type": "ui_group", "name": "Group 2", "tab": "f3269266.ad996", "order": 1, "disp": true, "width": "6", "collapse": false }, { "id": "d14867ca.4a8e08", "type": "ui_tab", "name": "Tab 1", "icon": "dashboard", "disabled": false, "hidden": false }, { "id": "f3269266.ad996", "type": "ui_tab", "name": "Tab 2", "icon": "dashboard", "disabled": false, "hidden": false } ]
What happens?
On the tab which is shown directly after opening the dashboard ui, the form field values are set as expected. But after switching to the second tab, the form is empty, which should be filled with values as well.
What do you expect to happen?
Forms where values are set dynamically should show the values even if the form is not on the default tab.
Please tell us about your environment:
- [x] Node-RED-Dashboard version: 2.26.1
- [x] Node-RED version: 1.2.7
- [x] node.js version: 10.19.0
- [x] npm version: 6.14.4
- [x] Platform/OS: Ubuntu 20.04.1 LTS
- [x] Browser: Google Chrome 87.0.4280.88
The values are indeed there if you refresh the page. The easy workaround is to use the ui_control node to trigger the load as the tab changes... but yes will look at it to see if we can do that automatically.
Here is your example
[{"id":"62686bb.69a5894","type":"ui_text","z":"798f73e4.a55b6c","group":"5476f1c.1f50a1","order":1,"width":0,"height":0,"name":"","label":"Tab1","format":"Works","layout":"row-spread","x":110,"y":45,"wires":[]},{"id":"4d3ca26.6766d5c","type":"ui_form","z":"798f73e4.a55b6c","name":"","label":"","group":"5476f1c.1f50a1","order":2,"width":0,"height":0,"options":[{"label":"Field1","value":"field1","type":"text","required":false,"rows":null},{"label":"Field2","value":"field2","type":"text","required":false,"rows":null}],"formValue":{"field1":"","field2":""},"payload":"","submit":"submit","cancel":"cancel","topic":"","x":515,"y":90,"wires":[[]]},{"id":"f8da4214.8b7a","type":"function","z":"798f73e4.a55b6c","name":"","func":"let timestamp = msg.payload;\nreturn {\n payload: {\n \"field1\": \"Value1 \" + timestamp,\n \"field2\": \"Value2 \" + timestamp\n }\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","x":345,"y":90,"wires":[["4d3ca26.6766d5c"]]},{"id":"7958d6b9.25aad8","type":"inject","z":"798f73e4.a55b6c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":145,"y":90,"wires":[[]]},{"id":"8d0a5a14.62cb28","type":"ui_text","z":"798f73e4.a55b6c","group":"849ffeda.40e4","order":1,"width":0,"height":0,"name":"","label":"Tab2","format":"Does not work","layout":"row-spread","x":110,"y":200,"wires":[]},{"id":"17d169bc.3530e6","type":"ui_form","z":"798f73e4.a55b6c","name":"","label":"","group":"849ffeda.40e4","order":2,"width":0,"height":0,"options":[{"label":"Field3","value":"field3","type":"text","required":false,"rows":null},{"label":"Field4","value":"field4","type":"text","required":false,"rows":null}],"formValue":{"field3":"","field4":""},"payload":"","submit":"submit","cancel":"cancel","topic":"","x":515,"y":240,"wires":[[]]},{"id":"8abb8821.373238","type":"function","z":"798f73e4.a55b6c","name":"","func":"let timestamp = msg.payload;\nreturn {\n payload: {\n \"field3\": \"Value3 \" + timestamp,\n \"field4\": \"Value4 \" + timestamp\n }\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","x":340,"y":240,"wires":[["17d169bc.3530e6"]]},{"id":"f2586ade.733338","type":"inject","z":"798f73e4.a55b6c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"0.2","topic":"","payload":"","payloadType":"date","x":150,"y":240,"wires":[[]]},{"id":"bd9c7cb4.8690c","type":"ui_ui_control","z":"798f73e4.a55b6c","name":"","events":"all","x":120,"y":150,"wires":[["5bdb06aa.e67e38"]]},{"id":"5bdb06aa.e67e38","type":"function","z":"798f73e4.a55b6c","name":"","func":"if (msg.payload === \"change\") {\n msg.payload = Date.now()\n return msg;\n}\nreturn null;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":270,"y":150,"wires":[["8abb8821.373238","f8da4214.8b7a"]]},{"id":"5476f1c.1f50a1","type":"ui_group","name":"Group 1","tab":"d14867ca.4a8e08","order":1,"disp":true,"width":"6","collapse":false},{"id":"849ffeda.40e4","type":"ui_group","name":"Group 2","tab":"f3269266.ad996","order":1,"disp":true,"width":"6","collapse":false},{"id":"d14867ca.4a8e08","type":"ui_tab","name":"Tab 1","icon":"dashboard","disabled":false,"hidden":false},{"id":"f3269266.ad996","type":"ui_tab","name":"Tab 2","icon":"dashboard","disabled":false,"hidden":false}]
I have the same with the "text input node" using the "time picker". When the page is first accessed the time value show "--:--", only when the value is clicked does it show the contained time value.
