Embedded cards tap_action

[Borrel88]

Short:
When embedding a card into another card, the tap_action of that embedded card triggers the tap_action of the mother card following by the action of the embedded card.

Long:
I have a custom button card setup with a grid layout.
Into one of the cells of that grid, I've got a second custom button card setup.
The 'mother' card has a tap_action of more-info.
The embedded card has a tap_action of navigate.

When I press the embedded button, it first triggers te more-info dialog, then triggers the navigate action.

Is it possible to create my card so that when you press on the area of the embedded card, it triggers the navigate action, and when you press on the rest of the card, it triggers the more-info dialog?

Button- Card Version: 3.4.0
HomeAssistant version: 0.117.5 (Docker core version)

This is the configuration I used:

  entity: sensor.docker_version
  icon: mdi:docker
  aspect_ratio: 5/1.3
  name: Docker
  show_state: true
  tap_action:
    action: more-info
  styles:
    card:
      - padding: 10px
      - background: rgb(38,38,40)
      - box-shadow: none
      - border-radius: 7px
      - --mdc-ripple-color: rgb(52,211,235)
    grid:
      - grid-template-areas: '"i n n more" "i s s more" "i cpu total more" "i mem stopped more"'
      - grid-template-columns: 0.8fr 1fr 1fr 0.3fr
      - grid-template-rows: 1fr 1fr 0.8fr 0.8fr
    icon:
      - color: rgb(52,211,235)
      - width: 100%
      - align-self: center
      - justify-self: center
    name:
      - font-weight: bold
      - font-size: 20px
      - align-self: center
      - justify-self: start
      - color: rgb(52,211,235)
    state:
      - font-size: 12px
      - align-self: start
      - justify-self: start
      - color: rgb(108,108,117)
    custom_fields:
      total:
        - font-size: 13px
        - align-self: end
        - justify-self: start
        - padding-left: 20px
      stopped:
        - font-size: 13px
        - align-self: start
        - justify-self: start
        - padding-left: 20px
        - --text-color-sensor: >
            [[[
              if (states['sensor.docker_containers_stopped'].state == 0) return 'rgb(242,242,247)';
              else return 'rgb(255,204,0)';
            ]]]
      cpu:
        - font-size: 13px
        - align-self: end
        - justify-self: start
        - --text-color-sensor: >
            [[[
              if (states['sensor.docker_cpu'].state > 80) return 'rgb(255,26,117)';
              if (states['sensor.docker_cpu'].state > 60) return 'rgb(255,204,0)';
              else return 'rgb(242,242,247)';
            ]]]
      mem:
        - font-size: 13px
        - align-self: start
        - justify-self: start
        - --text-color-sensor: >
            [[[
              if (states['sensor.docker_memory_percent'].state > 90) return 'rgb(255,26,117)';
              if (states['sensor.docker_memory_percent'].state > 75) return 'rgb(255,204,0)';
              else return 'rgb(242,242,247)';
            ]]]
      more:
        - align-self: start
        - justify-self: start
        - padding: 0px
  custom_fields:
    total: >
      [[[
        return "<span style='font-weight: bold'>Total: </span>" + states['sensor.docker_containers_total'].state
      ]]]
    stopped: >
      [[[
        return "<span style='font-weight: bold'>Stopped: </span>" + states['sensor.docker_containers_stopped'].state
      ]]]
    cpu: >
      [[[
        return "<span style='font-weight: bold'>CPU: </span><span style='color: var(--text-color-sensor);'>" + states['sensor.docker_cpu'].state + "%</span>"
      ]]]
    mem: >
      [[[
        return "<span style='font-weight: bold'>MEM: </span><span style='color: var(--text-color-sensor);'>" + states['sensor.docker_memory_percent'].state + "%</span>"
      ]]]
    more:
      card:
        type: 'custom:button-card'
        color_type: icon
        show_name: false
        show_label: false
        show_icon: true
        icon: mdi:folder-information-outline
        tap_action:
          action: navigate
          navigation_path: /dash-21/dash21_systeem_docker
        size: 30px
        color: rgb(108,108,117)
        styles:
          card:
            - background: none

Expected behavior
When pressing the embedded card it should trigger the navigate action.
When pressing anywhere in the 'mother' card but the embedded card, it should trigger the more-info dialog.

Desktop:

• Browser: Google Chrome
• Version: 87.0.4280.88 (Official build) (64-bits)

Smartphone:

• Device: Huawai Mate 10 Pro
• OS: Android 10 / EMUI 10.0.0
• Browser: Google Chrome
• Version: 87.0.4280.101

[RomRider]

Until I fix it, you can roll back to 3.3.4 and it should work again.

[RomRider]

This is fixed in 3.4.1 now