Setting action to none disables actions for nested cards

[adabelleleiram]

Checklist

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

Describe the bug I've created/remixed a card where I have three nested buttons. I want to be able to click on the 3 nested buttons and for nothing to happen when I click on the rest of the card (i.e. the icon, name and background)

Version of the card Version: custom

To Reproduce This is the configuration I used:

custom_shades_card:
  show_icon: true
  show_name: true
  show_label: false
  size: 20px
  tap_action:
    action: none
  styles:
    grid:
      - grid-template-areas: '"i n controls"'
      - grid-template-columns: "min-content auto 50%"
      - grid-template-rows: "min-content"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
    name:
      - place-self: center start
      - font-size: 14px
      - font-weight: bold
      - min-width: 0
      - overflow: visible
      - white-space: normal
      - text-align: left
      - height: 2em
      - margin: 0px 8px
    img_cell:
      - height: 42px
      - aspect-ratio: 1/1
      - border-radius: 50%
      - background-color: >
          [[[
              if (typeof states[entity.entity_id].attributes.current_position === "undefined"){
                if (states[entity.entity_id].state == "closed"){
                  return 'rgba(var(--color-theme),0.05)';
                } else
                  return 'rgba(var(--color-blue),0.2)';
              } else {
                if (states[entity.entity_id].attributes.current_position == 0){
                  return 'rgba(var(--color-theme),0.05)';
                } else {
                  return 'rgba(var(--color-blue),0.2)';
                }
              }
          ]]]
    icon:

  icon: mdi:window-shutter-open
  custom_fields:
    controls:
      card:
        type: "custom:button-card"
        template: "list_3_items"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              state:
                - value: "open"
                  styles:
                    icon:
                      - color: "rgba(var(--color-theme),0.4)"
              tap_action:
                action: "call-service"
                service: "cover.open_cover"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
              icon: "mdi:arrow-up"
          item2:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              tap_action:
                action: "call-service"
                service: "cover.stop_cover"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
              icon: "mdi:pause"
          item3:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              state:
                - value: "closed"
                  styles:
                    icon:
                      - color: "rgba(var(--color-theme),0.4)"
              tap_action:
                action: "call-service"
                service: "cover.close_cover"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
              icon: "mdi:arrow-down"

Screenshots See image above.

Expected behavior I would like to be able to have nothing happen when clicking outside of the nested buttons.

Desktop (please complete the following information):

• Browser: [Chrome]
• Version [101.0.4951.54]

Smartphone (please complete the following information):

• Device: [Pixel 6]
• OS: [Android 12]
• Browser [Companion App]
• Version [2022.3.0-full]

Additional context Add any other context about the problem here.

[matrixx567]

Hy,

there is a quick fix that actually works for me. This two CSS options will override the "disabled" CSS class

styles:
  card:
    - cursor: auto
    - pointer-events: inherit

[adabelleleiram]

Hy,

there is a quick fix that actually works for me. This two CSS options will override the "disabled" CSS class

styles:
  card:
    - cursor: auto
    - pointer-events: inherit

Thanks for the tip! It looks like - pointer-events: inherit was enough actually. The only thing is there is still click feedback when you click on the button (even though it doesn't do anything). Do you know how to disable that too?

https://user-images.githubusercontent.com/28298971/175904624-72bc195d-eca9-4512-8313-53bde5d2685f.mov

[markblokpoel]

I was also wrestling with this particular issue. Using Minimalist UI I have a lost of nested custom-buttons and on the Android companion the main button action even cancles e.g. the back gesture. I managed to disable the main button action using the trick above and then I used - '--mdc-ripple-press-opacity': 0 to disable the click feedback. It seems to work in a quick button example for me, but I’m going to try it out on more complex buttons later. Code example below.

type: custom:button-card
name: Bla
custom_fields:
  c:
    card:
      type: custom:button-card
      entity: light.kallax
      styles:
        card:
          - '--mdc-ripple-press-opacity': 0.5
tap_action:
  action: none
styles:
  card:
    - pointer-events: inherit
    - '--mdc-ripple-press-opacity': 0

• updated example, you also need to enable the opacity again for any nested card with an enabled action.