Toggle Function not handled on cards where I'm using

[jamesahendry]

Checklist

• I updated the card to the latest version available
• I cleared the cache of my browser

Describe the bug
Where I am using a grid and java code to change the icon colours the toggle button become unresponsive in V4.00. If I roll back to 3.42 no issues

Version of the card
4.00

To Reproduce

type: custom:button-card
size: 100%
styles:
  card:
    - height: 110px
    - border-radius: 5%
    - font-size: 12px
  grid:
    - grid-template-areas: '"l i i i temp" "l i i i temp" "l i i i s" "n n n n n"'
    - grid-template-columns: 1fr 1fr 1fr 1fr
    - grid-template-rows: 1fr 1fr 1fr 1fr
  custom_fields:
    temp:
      - align-self: start
      - justify-self: end
      - padding-right: px
name: >-
  [[[ return  `Zone 1 - ${states['sensor.weather1_temperature_round'].state}
  °C      

  ` ]]]
entity: switch.zonemaster_zone1
color_type: card
state:
  - value: 'on'
    color: rgb(253, 216, 53)
    background_colour: rgb(85, 95, 113)
    styles:
      icon:
        - animation:
            - rotating 1s linear infinite
        - color: rgb(85, 95, 113)
      name:
        - color: darkred
      state:
        - color: darkred
    icon: mdi:fan
    custom_fields:
      temp: |
        [[[
          return `<ha-icon
            icon="mdi:water-percent"
            style="width: 12px; height: 12px; color: rgb(85, 95, 113);">
            </ha-icon><span><span style="color: rgb(85, 95, 113); font-size: 12px">${Math.round(states['sensor.weather1_humidity'].state)}%</span></span>`
        ]]]
  - value: 'off'
    color: rgb(85, 95, 113)
    background_colour: rgb(85, 95, 113)
    styles:
      icon:
        - color: rgb(43, 55, 78)
      name:
        - color: rgb(43, 55, 78)
      state:
        - color: rgb(43, 55, 78)
    icon: mdi:coolant-temperature
    custom_fields:
      temp: |
        [[[
          return `<ha-icon
            icon="mdi:water-percent"
            style="width: 12px; height: 12px; color: lightblue;">
            </ha-icon><span><span style="color: lightblue; font-size: 12px">${Math.round(states['sensor.weather1_humidity'].state)}%</span></span>`
        ]]]
tap_action:
  action: toggle
show_icon: true
show_state: true
show_last_changed: true

Screenshots
If applicable, add screenshots to help explain your problem.

Expected behavior
same code on 3.4.2 can toggle the custom button / as soon as I upgrade to 4.0 unable to toggle card

Desktop (please complete the following information):

• Browser chrome
• ersion 115.0.5790.110 (Official Build) (64-bit)

Smartphone (please complete the following information):

• Device: [iphone 14]
• OS: [e.g. iOS16.5.1c]
• Browser [safari]

Additional context

• can also replicate this on my Android tablet.
• only causing issues on cards where I've implemented grid, additional icons and colors based on entity/attribute state.

[RomRider]

Is there a message in the Javascript console ?

[jamesahendry]

Heaps - I've installed your lateset 4.1.1 and still no good. Am I looking for an error specifically within custom-button-card?

[RomRider]

Am I looking for an error specifically within custom-button-card?

Yes, when you click the button

[jamesahendry]

Sorry - I'm not a developer! Hope this is what you're looking for - I assume the errors proir to loading the Button Card

[RomRider]

This has nothing to do with button-card.

When you click the button is there an error in the javascript console which appears at the same time?

[jamesahendry]

No there is no error.

Here are two buttons. Hall and Pendant. The Hall button has Java, the Pendant doesn't. If I am on 4.x and above the Hall won't even give me the ability to toggle it.

Downgrade to 3.5 and it's fine - screenshot below to prove it after download

I have dozens of buttons and none of the buttons with Javascript Templates will toggle on 4.x and above - can't even get the mouse cursor to allow you to toggle per screens shots

[jamesahendry]

Here's the code from Hall

type: custom:button-card
size: 100%
styles:
card:
- background-color: '#555F71'
- height: 100px
- border-radius: 10%
grid:
- grid-template-areas: '"l i i i temp" "l i i i s" "l i i i s" "n n n n n"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
custom_fields:
temp:
- align-self: start
- justify-self: end
- padding-right: px
name: Hall
entity: switch.light_switch3_entryway_hall
color_type: card
state:

• value: 'on'
  color: rgb(85, 95, 113)
  background_colour: rgb(85, 95, 113)
  icon: mdi:lightbulb-on-outline
  styles:
  icon:
  - color: gold
  name:
  - color: rgb(43, 55, 78)
  state:
  - color: gold
  custom_fields:
  temp: |
  [[[
  return <ha-icon icon="mdi:thermometer" style="width: 12px; height: 12px; color: gold;"> </ha-icon><span><span style="color: gold; font-size: 12px">${Math.round(states['sensor.entryway_temperature'].state)}°C</span></span>
  ]]]
• value: 'off'
  color: rgb(85, 95, 113)
  background_colour: rgb(85, 95, 113)
  icon: mdi:lightbulb-outline
  styles:
  icon:
  - color: rgb(43, 55, 78)
  name:
  - color: rgb(43, 55, 78)
  state:
  - color: rgb(43, 55, 78)
  custom_fields:
  temp: |
  [[[
  return <ha-icon icon="mdi:thermometer" style="width: 12px; height: 12px; color: rgb(43, 55, 78);"> </ha-icon><span><span style="color: rgb(43, 55, 78); font-size: 12px">${Math.round(states['sensor.entryway_temperature'].state)}°C</span></span>
  ]]]
  tap_action:
  action: toggle
  hold_action:
  action: more-info
  show_icon: true
  show_state: true

Here's the codefrom Pendant

type: custom:button-card
size: 100%
styles:
card:
- background-color: '#555F71'
- height: 100px
- border-radius: 10%
grid:
- grid-template-areas: '"l i i i temp" "l i i i s" "l i i i s" "n n n n n"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
name: Pendant
entity: switch.light_switch3_entryway_pendant
color_type: card
color: rgb(66, 134, 244)
state:

• value: 'on'
  color: rgb(85, 95, 113)
  background_colour: rgb(85, 95, 113)
  icon: mdi:lightbulb-on-outline
  styles:
  icon:
  - color: gold
  name:
  - color: rgb(43, 55, 78)
  state:
  - color: gold
• value: 'off'
  color: rgb(85, 95, 113)
  background_colour: rgb(85, 95, 113)
  icon: mdi:lightbulb-outline
  styles:
  icon:
  - color: rgb(43, 55, 78)
  name:
  - color: rgb(43, 55, 78)
  state:
  - color: rgb(43, 55, 78)
  tap_action:
  action: toggle
  hold_action:
  action: more-info
  show_icon: true
  show_state: true

[jamesahendry]

Here is the screenshot after upgrade to 4.x - as you can see can't even toggle the Hall - mouse doesn't even see it as a button on all cards with Javascript Template

[johnekarlsson]

Hi! I have this problem too. Not even the cursor indicates that it's a clickable button. I've been able to isolate it pretty good. If I remove the custom fields, within "state:" it works. It's even possible to have the custom field specified outside of the "state:", but as soon as I want to have a custom field dependent on the state, the button can't be clicked.

type: custom:button-card
entity: entity_id_name
tap_action:
  action: toggle
state:
  - value: 'on'
    custom_fields:
      fieldname: fieldtext
  - value: 'off'
    custom_fields:
      fieldname: fieldtext

[jamesahendry]

Looks like you've isolated the issue further than me

[github-actions]

🎉 This issue has been resolved in version 4.1.2-dev.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[jamesahendry]

Confirming this resolved the issue - thanks!

[github-actions]

🎉 This issue has been resolved in version 4.1.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀