switch with custom icon - clickable entire line

[egs2003]

Current Behavior

if i click on the icon, nothing happens

Expected Behavior

click on line, icon or button should change the state

Steps To Reproduce

[
{
"id": "0e65c4d34d11de2e",
"type": "ui-switch",
"z": "34e4856b.14037a",
"name": "",
"label": "Baum",
"group": "f15f86f2136f3b9c",
"order": 1,
"width": "2",
"height": "1",
"passthru": false,
"decouple": false,
"topic": "topic",
"topicType": "msg",
"style": "",
"className": "",
"layout": "row-spread",
"clickableArea": "line",
"onvalue": "ON",
"onvalueType": "str",
"onicon": "pine-tree",
"oncolor": "#ff3",
"offvalue": "OFF",
"offvalueType": "str",
"officon": "pine-tree",
"offcolor": "#ccc8",
"x": 530,
"y": 3300,
"wires": [
[]
]
},
{
"id": "f15f86f2136f3b9c",
"type": "ui-group",
"name": "Group Name",
"page": "a9d73a1858594618",
"width": "6",
"height": "1",
"order": 1,
"showTitle": false,
"className": "group_switches",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "a9d73a1858594618",
"type": "ui-page",
"name": "Home",
"ui": "f43bda2aa15343bf",
"path": "/page1",
"icon": "home",
"layout": "grid",
"theme": "e82cb4d5ab509d2d",
"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": "f43bda2aa15343bf",
"type": "ui-base",
"name": "test",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"showPageTitle": false,
"navigationStyle": "icon",
"titleBarStyle": "default",
"showReconnectNotification": true,
"notificationDisplayTime": "1",
"showDisconnectNotification": true
},
{
"id": "e82cb4d5ab509d2d",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094ce",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"density": "default",
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]

Environment

• Dashboard version: 1.20.0
• Node-RED version: 4.0.5
• Node.js version:
• npm version:
• Platform/OS:
• Browser: chrome

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[bartbutenaers]

Hi @egs2003,
Thanks for sharing a simple flow that allows us to reproduce the problem very easily. That really helps!

I have created a pull request to fix this:
#1523

[joepavitt]

Closed by #1523