Toggle button not reacting to direct click

Setup, Configuration and Use Widgets
1

Hello.

I had developped a simple widget to manage some of my poweroutlets with a toggle button.
But after some time, I felt I was missing the history of the activity.

So, I modified the widget to add an analyser option.
Everything works, except a strange behaviour of the toggle button.
Initially, I could toggle the button just clicking on it or by swipping it left or right.
Now, with the analyser option, the direct click doesn’t work anymore.
It is slightly disturbing and incoherent with the rest of the UI.
How can I revert to the ‘normal’ behaviour ?

Thanks and regards…

uid: Items_List_Toggle_and_Analyze
tags:
  - card
  - general
props:
  parameters:
    - default: ""
      description: Title
      label: Title
      name: Title
      required: false
      type: TEXT
    - default: ""
      description: Footer
      label: Footer
      name: Footer
      required: false
      type: TEXT
    - description: The item Tags
      label: itemsWithTags
      name: itemsWithTags
      required: true
      type: TEXT
    - description: Item filter criteria
      label: Item filter criteria
      name: itemsFilters
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 5, 2026, 11:31:43 AM
component: f7-card
config:
  footer: =props.Footer
  title: '=(props.Title == "") ? props.itemsWithTags : props.itemsWithTags  + " -
    " + props.Title '
slots:
  default:
    - component: oh-list
      slots:
        default:
          - component: oh-repeater
            config:
              filter: =props.itemsFilters
              for: item
              fragment: true
              itemTags: =props.itemsWithTags
              sourceType: itemsWithTags
            slots:
              default:
                - component: oh-toggle-item
                  config:
                    icon: '=(items[loop.item.name].state == "ON") ? loop.item.category +"-on"  :
                      loop.item.category +"-off" '
                    item: =loop.item.name
                    title: =loop.item.label
                    action: analyzer
                    actionAnalyzerItems: = loop.item.name
                    noChevron: true
2

You cannot achieve your desired result this way. The specific oh-something-item components are not expected to have actions set. You can set actions for them because of the underlying construction of these components, but if you do so, you change how the list item is actually turned into html and the sub-component (in this case the toggle) becomes inaccessible.

The easiest way to have both of these functions on a list item is to move away from using the toggle item and got with the fully generic oh-list-item and then add both a toggle and an analyzer link to that item:

- component: oh-list-item
  config:
    icon: '=(items[loop.item.name].state == "ON") ? loop.item.category +"-on"  :
      loop.item.category +"-off" '
    item: =loop.item.name
    title: =loop.item.label
  slots:
    after:
      - component: f7-row
        config:
          style:
            gap: 20px
        slots:
          default:
            - component: oh-toggle
              config:
                item: =loop.item.name
            - component: oh-link
              config:
                iconF7: graph_square
                action: analyzer
                actionAnalyzerItems: = loop.item.name
3

Thank you so much Justin.
Simple but efficient.