# DB2 Switch node doesn't response when clicking on the label

**URL:** <https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [7 September 2024 14:11 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770 "2024-09-07T14:11:32Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [7 September 2024 14:11 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770/1 "2024-09-07T14:11:32Z")

</div>

In DB1 you can click anywhere on the line in a switch node, label or icon to get the node switching

However in DB2 the node is only responding we clicking on the icon. This is very annoying when working with touchscreen, you need to do now an "precise click". The wife is used to click somewhere to get the light on.

Do I miss something here, or is it by design.

![Db2Switch](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6da0a4dcfce3d2e76f33963e7b4f08b605cd2e7b.gif)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [7 September 2024 19:35 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770/2 "2024-09-07T19:35:51Z")

</div>

@edje11,

No idea whether that is by design or not.

But when you look at the frontend [code](https://github.com/FlowFuse/node-red-dashboard/blob/main/ui/src/widgets/ui-switch/UISwitch.vue#L3) of the ui-switch, you see that there is a label and a switch. And there is only a click event handler attached to the the `v-switch` but not to the `label`, so it will indeed it looks like it will behave like you describe.

I think it could be solved by adding also a click event handler to the label element:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/47653cd19a9c991f7fba30d68b02b69e56815b30.png)

But not sure whether the UX folks consider it good practice, that the labels are clickable. Moreover not sure whether other widgets behave in a similar way, because I assume the look and feel should be consistent across all available widgets.

Bart

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [10 September 2024 10:11 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770/3 "2024-09-10T10:11:39Z")

</div>

I think this is a very reasonable request, and if I recall correctly, is how we once had it, but some users requested it was removed. I can't find any evidence of that in our issues though, if I recall correctly @Colin was involved in that discussion at one point?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 September 2024 10:43 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770/4 "2024-09-10T10:43:20Z")

</div>

> [@joepavitt](#):
>
> if I recall correctly @Colin was involved in that discussion

I don't remember that, but it seems strange to me that clicking the label should trip the switch, so perhaps I did argue that. However, I do see that that this is how D1 works, and I had never noticed, so it apparently is not an issue for me either way.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [10 September 2024 10:58 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770/5 "2024-09-10T10:58:08Z")

</div>

In which case, @BartButenaers given you have the local change, if you want to open the PR - we'll get it reviewed/merged

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [10 September 2024 19:54 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770/6 "2024-09-10T19:54:07Z")

</div>

Well in fact I had it updated in notepad++ only for a screenshot 😇  
Anyway I have changed the code, but I am not sure yet how it should behave visually.

## Question 1 - Look and feel

Currently the label is _ **not clickable** _ in the original dashboard D2:

![ui-switch-unclickable](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1bd4429bb3773c342c6442d8291e0b6d71a69232.gif)

So I changed the _ **label as clickable** _:

![switch-clickable](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/a/5ad2fc7e017e364f6af94c58388770c954509396.gif)

But that way it isn't visually clear that the label is clickable. So I added a _ **'pointer' cursor** _ to the label:

![clickable_label_pointer](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0d70ceacd295932c335e5a0bd47be9c38c7d3835.gif)

But it looks very weird that the entire label - even the empty area - is clickable. So I added a span for the text within the label, and applied the label and click handler to that span element. Then _ **only the label text is clickable** _:

![switch-clickable-span](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/2/e20dc3309e669b2d6f883ad7aa9c96097b703470.gif)

So the multi-million-dollar question is: which one is preferred. Imho the last one...

## Question 2 - Optional clickable label

Personally I don't like the clickable label at all, because I want only the switch to become clickable. I e.g. have switches to turn sirenes on and off. So I don't want to happen that by clicking on a label while swiping on my phone's screen...

But I can understand that some folks want it for other use cases. So I was wondering if it is ok to add an option to the config screen where you can choose whether the label is clickable or not. Because I would certainly turn it off...

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 September 2024 19:59 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770/7 "2024-09-10T19:59:44Z")

</div>

Optional for sure.

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [10 September 2024 20:12 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770/8 "2024-09-10T20:12:49Z")

</div>

> [@BartButenaers](#):
>
> But it looks very weird that the entire label - even the empty area - is clickable

That is the way it was also in DB1.  
For touchscreen is nice that the the whole line, text, blank part and icon response to the touch.

In DB1 it was not optional, but if it's an easy mod everybody can be happy.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [10 September 2024 20:23 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770/9 "2024-09-10T20:23:45Z")

</div>

> [@edje11](#):
>
> everybody can be happy

Perhaps I can do it like this, to cover all use cases:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b26904f34c9a53252f63f4ffea0e568beceb0706.png)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [11 September 2024 09:54 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770/10 "2024-09-11T09:54:50Z")

</div>

PR would be very welcome ❤

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [14 September 2024 05:40 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770/11 "2024-09-14T05:40:08Z")

</div>

Here you go @joepavitt (demo animation included):

> <https://github.com/FlowFuse/node-red-dashboard/pull/1290>
>
> \## Description
> 
> As requested \[here\](https://discourse.nodered.org/t/db2-switch…-node-doesnt-response-when-clicking-on-the-label/90770/10) by Joe, a PR to allow users to specify the clickable area of a ui switch:
> 
> !\[image\](https://github.com/user-attachments/assets/ee8d25b4-9363-41d0-8227-1fbbfeed3e9f)
> 
> Depending on the use case, a user can change it to fits his needs:
> 
> !\[image\](https://github.com/user-attachments/assets/fb0177e0-decd-41d6-b80d-3b2bce619694)
> 
> P.S. I find my md file a bit limited to be honest. But not sure how to add more info to it in a decent way. Currently my info panel contains more info compared to the md file, which is the opposite what I would expect. And info like my screenshot above of the 3 areas will get lost here in this pull request and never end up in the documentation. Not sure if that is the way to go...
> 
> The property can adjusted dynamically via \`msg.ui\_update.clickableArea\`. The following demo shows what happens when I hover across the 3 areas (e.g. mouse cursor) and if I click on every area:
> 
> !\[clickable switch\](https://github.com/user-attachments/assets/601e34c0-9810-402e-aede-4bcc974d7436)
> 
> Two remarks about the code:
> + Just for clarification: I have used a \`@click.stop\` which is to avoid event propagation. Because when \*'entire line'\* has been selected, both the \`\<label\>\` and \`\<tag\>\` elements will get a click event handler. So when you click on the tag, a switch toggle will be triggered. But the event bubbles up to the label element and trigger its click event handler also, resulting in a second switch toggle. Which is not what we want.
> 
> + Something that might be a bit confusing: for a user the \*"label"\* is the visible text. But for the ui developer, that \*"label"\* option corresponds to the \`\<tag\>\` element. While the \`\<label\>\` element will be clickable when "\*entire line"\* has been selected. It might be useful to add this as a comment in the code?
> 
> \## Related Issue(s)
> 
> None I think
> 
> \## Checklist
> 
> 
> 
> - \[X\] I have read the \[contribution guidelines\](https://github.com/FlowFuse/flowfuse/blob/main/CONTRIBUTING.md)
> - \[\] Suitable unit/system level tests have been added and they pass 
> - \[X\] Documentation has been updated
> - \[\] Upgrade instructions
> - \[\] Configuration details
> - \[\] Concepts
> - \[\] Changes \`flowforge.yml\`?
> - \[\] Issue/PR raised on \`FlowFuse/helm\` to update ConfigMap Template
> - \[\] Issue/PR raised on \`FlowFuse/CloudProject\` to update values for Staging/Production
> 
> \## Labels
> 
> - \[\] Includes a DB migration? -\> add the \`area:migration\` label

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 September 2024 05:40 UTC](https://discourse.nodered.org/t/db2-switch-node-doesnt-response-when-clicking-on-the-label/90770/12 "2024-09-28T05:40:50Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.