Z order error with (in this instance?) colour picker

NohWayJose commented 7 months ago

Current Behavior

NodeRedRenderingBug

I have several colour pickers in a group but when one is selected (by clicking the colour patch/button) the pop-up appears behind the other selectors (as per the pic)

If there is a way in the UI to control this, I didn't find it :(

Expected Behavior

Clicking the colour patch/button should open the picker on the frontmost layer Clicking another colour patch/button will dismiss the original picker So will clicking outside the group or pressing Esc

Steps To Reproduce

See example flow code

Example flow

[
    {
        "id": "618bf278f5b73cc9",
        "type": "ui_colour_picker",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "label": "Night light colour",
        "group": "9788c9b2a0490f3e",
        "format": "hex",
        "outformat": "object",
        "showSwatch": true,
        "showPicker": false,
        "showValue": false,
        "showHue": false,
        "showAlpha": false,
        "showLightness": true,
        "square": "false",
        "dynOutput": "false",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 510,
        "y": 260,
        "wires": [
            [
                "21c4f7b73ac724c8",
                "f2247275dd823cdb"
            ]
        ]
    },
    {
        "id": "21c4f7b73ac724c8",
        "type": "mqtt out",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "topic": "bathroom/mirror/nightLightCol",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "3f447ded17b259ee",
        "x": 800,
        "y": 260,
        "wires": []
    },
    {
        "id": "99cbe86ea34ac3d3",
        "type": "mqtt out",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "topic": "bathroom/mirror/minCol",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "3f447ded17b259ee",
        "x": 780,
        "y": 500,
        "wires": []
    },
    {
        "id": "507eea4f59271095",
        "type": "mqtt out",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "topic": "bathroom/mirror/hourCol",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "3f447ded17b259ee",
        "x": 780,
        "y": 560,
        "wires": []
    },
    {
        "id": "f2247275dd823cdb",
        "type": "debug",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 770,
        "y": 160,
        "wires": []
    },
    {
        "id": "4f548abb3c3564da",
        "type": "ui_colour_picker",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "label": "Background colour",
        "group": "9788c9b2a0490f3e",
        "format": "hex",
        "outformat": "object",
        "showSwatch": true,
        "showPicker": false,
        "showValue": false,
        "showHue": false,
        "showAlpha": false,
        "showLightness": true,
        "square": "false",
        "dynOutput": "false",
        "order": 2,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 500,
        "y": 320,
        "wires": [
            [
                "b59cf7e6d62e9c27",
                "f2247275dd823cdb"
            ]
        ]
    },
    {
        "id": "b59cf7e6d62e9c27",
        "type": "mqtt out",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "topic": "bathroom/mirror/BGLightCol",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "3f447ded17b259ee",
        "x": 800,
        "y": 320,
        "wires": []
    },
    {
        "id": "48a83be4c50febe0",
        "type": "ui_colour_picker",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "label": "Five minute tick colour",
        "group": "9788c9b2a0490f3e",
        "format": "hex",
        "outformat": "object",
        "showSwatch": true,
        "showPicker": false,
        "showValue": false,
        "showHue": false,
        "showAlpha": false,
        "showLightness": true,
        "square": "false",
        "dynOutput": "false",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 490,
        "y": 380,
        "wires": [
            [
                "4bbe80deb5540eb7",
                "f2247275dd823cdb"
            ]
        ]
    },
    {
        "id": "4bbe80deb5540eb7",
        "type": "mqtt out",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "topic": "bathroom/mirror/fiveMinTickCol",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "3f447ded17b259ee",
        "x": 810,
        "y": 380,
        "wires": []
    },
    {
        "id": "f49408fee0b52e52",
        "type": "ui_colour_picker",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "label": "Fifteen minute tick colour",
        "group": "9788c9b2a0490f3e",
        "format": "hex",
        "outformat": "object",
        "showSwatch": true,
        "showPicker": false,
        "showValue": false,
        "showHue": false,
        "showAlpha": false,
        "showLightness": true,
        "square": "false",
        "dynOutput": "false",
        "order": 4,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 480,
        "y": 440,
        "wires": [
            [
                "01a3585933b82e81",
                "f2247275dd823cdb"
            ]
        ]
    },
    {
        "id": "01a3585933b82e81",
        "type": "mqtt out",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "topic": "bathroom/mirror/fifteenMinTickCol",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "3f447ded17b259ee",
        "x": 820,
        "y": 440,
        "wires": []
    },
    {
        "id": "af4efdb2f216ded1",
        "type": "ui_colour_picker",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "label": "Minute hand colour",
        "group": "9788c9b2a0490f3e",
        "format": "hex",
        "outformat": "string",
        "showSwatch": true,
        "showPicker": false,
        "showValue": false,
        "showHue": false,
        "showAlpha": false,
        "showLightness": true,
        "square": "false",
        "dynOutput": "false",
        "order": 5,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 500,
        "y": 500,
        "wires": [
            [
                "99cbe86ea34ac3d3",
                "f2247275dd823cdb"
            ]
        ]
    },
    {
        "id": "12c269535780e74b",
        "type": "ui_colour_picker",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "label": "Hour hand colour",
        "group": "9788c9b2a0490f3e",
        "format": "hex",
        "outformat": "string",
        "showSwatch": true,
        "showPicker": false,
        "showValue": false,
        "showHue": false,
        "showAlpha": false,
        "showLightness": true,
        "square": "false",
        "dynOutput": "false",
        "order": 6,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 510,
        "y": 560,
        "wires": [
            [
                "507eea4f59271095",
                "f2247275dd823cdb"
            ]
        ]
    },
    {
        "id": "9788c9b2a0490f3e",
        "type": "ui_group",
        "name": "Mirror settings",
        "tab": "90d560824c17c506",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "3f447ded17b259ee",
        "type": "mqtt-broker",
        "name": "Mosquitto",
        "broker": "192.168.7.245",
        "port": "1883",
        "clientid": "",
        "usetls": false,
        "protocolVersion": "5",
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willPayload": "",
        "willMsg": {},
        "sessionExpiry": ""
    },
    {
        "id": "90d560824c17c506",
        "type": "ui_tab",
        "name": "Bathroom settings",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

Environment

Node-RED version: 2.0.6
Node.js version: v21.5.0
npm version: 10.2.4
Platform/OS: OpenSuse Tumbleweed
Browser: Firefox 122.0 (64-bit)

hardillb commented 7 months ago

Are you really using Node-RED 2.0.6?

The 2.2.x stream went out of maintenance in July 2023

Can you reproduce this on 3.1.5?

Or do you mean v2.0.6 of the Node-RED dashboard? If so this is the wrong repo

NohWayJose commented 7 months ago

@hardillb Hey Ben , Yes, I'm afraid I was very backlevel running DietPi on a Pi4. I've upgraded now:

root@DietProot@DietPi:~# npm list
root@ /root
└── node-red@3.1.5

Dashboard is at 3.6.2

BUT, the help tab reports v2.2.3 despite rechecking my server installed version (3.1.5) and recycling editor web page (incl flushing the cache)

Either way, The original z-order issue persists with my current setup. Have I missed a package upgrade for a germane component?

hardillb commented 7 months ago

Are you sure you have restarted the Node-RED instance that is actually running?

If the editor is still reporting 2.2.3 after reloading the editor then that is what is actually running.

By default Node-RED would not be installed under the root users home directory.

Please show the start of the Node-RED logs as it will print what version it is running.

Also the Platform/OS question is about where Node-RED is running so should be DietPi, not what OS you are running the browser on.

Either way this will need moving to the dashboard repository.

NohWayJose commented 7 months ago

@hardillb I would transfer it to Dashboard repo but it seems I don't have the authority as I can't see the Transfer option in the right panel. If you have auth, I'm happy for you to transfer it for me

node-red / node-red-dashboard