Icon Actions Inconsistencies

[GGSSDD]

Checklist

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

Describe the bug
I have a setup where I use the custom button card in a Decluttering Card template. In the frontend the Decluttering Card is duplicated inside a Swipe Swipe with different values set for each repetition. I have dynamic actions set for the Button Card, already adapted to the new breaking changes introduced with the 5.0 version (meaning the use of “javascript”). The card actions used to work just fine and they still do, but the icon actions are all messed up, even though I never touched those, so they should’ve been disabled by default. I’ve tried everything, setting the icon_action to none, it didn’t work, setting the icon_action to match the card *_action, nothing, it’s all scrambled, and nothing works, icon actions related. I have other similar setups, with Decluttering templates and custom card actions but they behave as expected.

Version of the card
Version: 5.0.2

To Reproduce
This is the configuration I used:

Relevant part of Decluttering template:

type: conditional
conditions:
  - condition: state
    entity: '[[switch1]]'
    state_not: unknown
card:
  type: custom:button-card
  card_mod:
    style: |
      ha-card {
        height: 35px !important;
      }
  entity: '[[switch1]]'
  show_state: false
  show_name: false
  show_icon: true
  icon: |
    [[[ 
      const ent = states['[[switch1]]'];
      const iconOn = '[[switch1_icon_state_on]]' ? '[[switch1_icon_state_on]]' : null;
      const iconOff = '[[switch1_icon_state_off]]' ? '[[switch1_icon_state_off]]' : null;

      if (['on', 'open'].includes(ent.state))
        return iconOn || ent.attributes.icon;

      if (['off', 'closed'].includes(ent.state))
        return iconOff || ent.attributes.icon;

      return ent.attributes.icon;
    ]]]
  tap_action:
    action: javascript
    javascript: |
      [[[
        const entityId = '[[switch1]]';
        const actionType = '[[switch1_action_type]]';
        if (actionType !== 'tap') return;
        hass.callService('homeassistant', 'toggle', { entity_id: entityId });
      ]]]
  double_tap_action:
    action: javascript
    javascript: |
      [[[
        const entityId = '[[switch1]]';
        const actionType = '[[switch1_action_type]]';
        if (actionType !== 'double_tap') return;
        hass.callService('homeassistant', 'toggle', { entity_id: entityId });
      ]]]
  hold_action:
    action: javascript
    javascript: |
      [[[
        const entityId = '[[switch1]]';
        const actionType = '[[switch1_action_type]]';
        if (actionType !== 'hold') return;
        hass.callService('homeassistant', 'toggle', { entity_id: entityId });
      ]]]
  styles:
    card:
      - border-radius: 50%
      - padding: 0
      - background: rgba(200, 200, 190, 1)
      - box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.7), inset 0px 2px 1px rgba(255, 255, 255, 0.7), inset 0px -1px 2px rgba(0, 0, 0, 0.6)
      - z-index: 100
    icon:
      - width: 17px
      - color: rgba(110, 110, 100, 1)
  state:
    - value: 'on'
      styles:
        card:
          - background: >
              linear-gradient(to bottom, rgba(230, 135, 9, 1), rgba(255, 145, 9, 1))
          - box-shadow: >
              inset 0px 2px 4px rgba(0, 0, 0, 0.5),
              inset 0px -2px 4px rgba(255, 200, 150, 1)
        icon:
          - color: white
    - value: 'open'
      styles:
        card:
          - background: >
              linear-gradient(to bottom, rgba(230, 135, 9, 1), rgba(255, 145, 9, 1))
          - box-shadow: >
              inset 0px 2px 4px rgba(0, 0, 0, 0.5),
              inset 0px -2px 4px rgba(255, 200, 150, 1)
        icon:
          - color: white
  view_layout:
    grid-area: switch1

Relevant part of Frontend setup:

type: custom:mod-card
style:
  swipe-card$: |
    swiper-slide {
      backface-visibility: hidden !important;
      -webkit-backface-visibility: hidden !important;
      transform-style: preserve-3d !important;
      will-change: transform;
      -webkit-transform: translateZ(0);
    }
  style: |
    ha-card {
      background-color: none !important;
      padding: 0;
    }
card:
  type: custom:swipe-card
  start_card: 4
  parameters:
    effect: fade
    fadeEffect:
      crossFade: true
    speed: 1200
    mousewheel: true
  cards:
    - type: custom:decluttering-card
      template: custom_area_card
      variables:
        - area_title: Outdoor Front
        - sensor1: sensor.gc131_twc_temperature
        - sensor2: sensor.gc131_twc_relative_humidity
        - sensor3: ""
        - switch1: switch.cruiser_detection
        - switch1_action_type: tap
        - switch1_icon_state_on: ""
        - switch1_icon_state_off: ""
        - switch2: switch.zb_septic_pump_toggle
        - switch2_action_type: tap
        - switch2_icon_state_on: ""
        - switch2_icon_state_off: ""
        - switch3: input_boolean.vto_unlock_area_card
        - switch3_action_type: hold
        - switch3_icon_state_on: ""
        - switch3_icon_state_off: ""
        - switch4: ""
        - switch4_action_type: ""
        - switch4_icon_state_on: ""
        - switch4_icon_state_off: ""
        - switch5: ""
        - switch5_action_type: ""
        - switch5_icon_state_on: ""
        - switch5_icon_state_off: ""
        - switch6: ""
        - switch6_action_type: ""
        - switch6_icon_state_on: ""
        - switch6_icon_state_off: ""
        - switch7: ""
        - switch7_action_type: ""
        - switch7_icon_state_on: ""
        - switch7_icon_state_off: ""
        - switch8: ""
        - switch8_action_type: ""
        - alert1: alarm_control_panel.gc131_alarm
        - alert2: binary_sensor.cruiser_motionalarm
        - alert3: binary_sensor.interfon_button_pressed
        - alert4: ""
        - alert5: ""
        - alert6: ""
    - type: custom:decluttering-card
      template: custom_area_card
      variables:
        - area_title: Outdoor Back
        - sensor1: sensor.gc131_twc_temperature
        - sensor2: sensor.gc131_twc_relative_humidity
        - sensor3: ""
        - switch1: switch.bullet_detection
        - switch1_action_type: tap
        - switch1_icon_state_on: ""
        - switch1_icon_state_off: ""
        - switch2: ""
        - switch2_action_type: ""
        - switch2_icon_state_on: ""
        - switch2_icon_state_off: ""
        - switch3: ""
        - switch3_action_type: ""
        - switch3_icon_state_on: ""
        - switch3_icon_state_off: ""
        - switch4: ""
        - switch4_action_type: ""
        - switch4_icon_state_on: ""
        - switch4_icon_state_off: ""
        - switch5: ""
        - switch5_action_type: ""
        - switch5_icon_state_on: ""
        - switch5_icon_state_off: ""
        - switch6: ""
        - switch6_action_type: ""
        - switch6_icon_state_on: ""
        - switch6_icon_state_off: ""
        - switch7: ""
        - switch7_action_type: ""
        - switch7_icon_state_on: ""
        - switch7_icon_state_off: ""
        - switch8: ""
        - switch8_action_type: ""
        - switch8_icon_state_on: ""
        - switch8_icon_state_off: ""
        - alert1: alarm_control_panel.gc131_alarm
        - alert2: binary_sensor.bullet_motionalarm
        - alert3: ""
        - alert4: ""
        - alert5: ""
        - alert6: ""

Expected behavior
The icon actions should match the card actions, or at least to be able to disable them.

Desktop (please complete the following information):

• Browser: Microsoft Edge
• Version: latest

Smartphone (please complete the following information):

• Device: iPhone 11 Pro
• OS: 18.7.1
• Browser: Conpanion App
• Version: latest

[RomRider]

but the icon actions are all messed up, even though I never touched those

What does this mean ?
I don't see any icon_*_action in your config.

[GGSSDD]

I removed it at some point, as it didn't do anything, but as I said, the card actions work as intended.

[RomRider]

Sorry, but I don't understand what I'm supposed to fix, your message is not clear: "all messed up" can mean anything.

[GGSSDD]

Let's take the switches for example, if I were to define all 8 of them in each decluttering section... It means that while the card actions resolve properly to the defined entity in each switch section, the icon actions don't. Some of them do, some of them resolve to other entities in a different decluttering section and some of them don't do anything... it's a very erratic behavior on the icon actions side, even if I don't have any icon_action set, even if I define icon_action in some way

[RomRider]

Could you please do several things:

• Share a minimal config which generate this behavior
• Test without the swipe-card and see if it's the same behavior (horizontal-stack instead for eg.)

[GGSSDD]

I can confirm that moving the Decluttering cards from the Swipe card into a vertical-stack solved the erratic behavior of the icon related actions. Once again, there were no issues with the card related actions, not even inside the Swipe card.
Perhaps an option to truly disable them if not needed, or in particular cases like this would be good!?

[dcapslock]

Hi, @GGSSDD I am not following what the erractic behaviour was and what you want as an option to disabled? The information you are provding is very cryptic. On one hand you say everything is solved, but on ther other you wish for an option... but for what 🤷 ?

[GGSSDD]

On one hand you say everything is solved

I didn't say everything is solved, I said that removing the cards from the swipe card solved the erratic behavior of the icon related actions

[dcapslock]

I am still unclear of what the issue is then? As per @RomRider request, can you provide a minimal config that shows your issue?

[GGSSDD]

There’s not much I can do right now since I’m on my phone. I’ll try to do that tomorrow on a computer.

[Mariusthvdb]

On one hand you say everything is solved

I didn't say everything is solved, I said that removing the cards from the swipe card solved the erratic behavior of the icon related actions

But that sounds like the regular tap issues swipe card has by design. Probably need to play with the available options in that card, or move to the recent card that aims to replace it, see https://github.com/nutteloost/simple-swipe-card

[GGSSDD]

I've been able to test the minimal config below. The issue appears in the swipe card context with fade effect (lucky me). As you can see, even if I haven't defined any icon actions for any of the swipes, they all toggle the entity in the last swipe (grow_light_red), in this case. In my main config this is much more erratic, more swipes, more entities, different behaviours.
Anyway, the card related actions still function properly, they all toggle the proper entity as defined.

type: custom:mod-card
style: |
  ha-card {
    background-color: none !important;
    padding: 0;
  }
card:
  type: custom:swipe-card
  start_card: 2
  parameters:
    effect: fade
    fadeEffect:
      crossFade: false
    speed: 1200
    mousewheel: true
  cards:
    - type: custom:button-card
      entity: light.living_room_light_nanoleaf_bulb
      show_state: false
      show_name: false
      show_icon: true
      tap_action:
        action: toggle
      styles:
        card:
          - background: white
          - height: 50px
          - width: 50px
          - border-radius: 50%
          - padding: 0
        icon:
          - background: black
          - width: 20px
          - height: 20px
          - border-radius: 50%
    - type: custom:button-card
      entity: light.grow_light_picow_grow_light_blue
      show_state: false
      show_name: false
      show_icon: true
      tap_action:
        action: toggle
      styles:
        card:
          - background: white
          - height: 50px
          - width: 50px
          - border-radius: 50%
          - padding: 0
        icon:
          - background: blue
          - width: 20px
          - height: 20px
          - border-radius: 50%
    - type: custom:button-card
      entity: light.grow_light_picow_grow_light_red
      show_state: false
      show_name: false
      show_icon: true
      tap_action:
        action: toggle
      styles:
        card:
          - background: white
          - height: 50px
          - width: 50px
          - border-radius: 50%
          - padding: 0
        icon:
          - background: red
          - width: 20px
          - height: 20px
          - border-radius: 50%