more-info dialog always opens on tap if button-card is placed inside entities card

[hcoohb]

Checklist

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

Describe the bug If the button card is placed inside and entities card, no matter what tap_action I provide, the more-info dialog opens (and the action is also performed)

Version of the card Version: 1.11.1

To Reproduce This is the configuration I used:

  - type: entities
    entities:
    - type: "custom:button-card"
      entity: switch.sw1
      name: Button in entities
      tap_action: 
        action: toggle

  - type: "custom:button-card"
    entity: switch.sw1
    name: Button
    tap_action: 
      action: toggle

Expected behavior I would expect the more-dialog to not show unless it is the action provided in tap_action

Desktop (please complete the following information):

• Browser chrome Win, Linux
• Version 75

Smartphone (please complete the following information):

• Device: oneplus6
• OS: Android 9
• Browser Chrome
• Version ?

Additional context Only seems to appear when the button card is inside entities, however, it is the only way I have found to be able to stack vertically 2 buttons and be able to style the background nicely using card-mod

[RomRider]

Button card is not supposed to be used inside an entity card. I can't change that behavior, it's how the entity card works unfortunately.

To stack 2 buttons vertically in the same card, you can use vertical-stack-in-card :)

[hcoohb]

Thanks for the quick answer! Oh, I thought it would have been possible to stop the propagation of the click on the button-card. I have tried with vertical-stack-in-card but because it is not a ha-card, I cannot modify the style (ie margin, background and borders) of the card with card-mod. (as this vertical-stack-in-card would be inside another vertical-stack-in-card and horizontal-card).

What I am trying to do is to have the icon part to toggle a service and the name part of the card to be a link toward the service url. But it seems if I just do a inside the name_template, it goes to the url but it also toggle the service at the same time which I do not want. Would you have any advice?

Thanks and regards

[stefancvetkovic]

I am in same train with you @hcoohb. Always more-info showing up when it in entities type.

[iantrich]

@RomRider @hcoohb is right. Adding ev.stopPropagation() to each handle method should avoid this. The more-info is handled by the outer wrapper, but rows can stop it from being executed e.g. script row when clicking on their internal elements.

[RomRider]

I'll have a look if this works. Cheers :)

[RomRider]

Made it work with ev.stopPropagation(). Sorry for the multiple edits...

[hcoohb]

Thanks for the quick resolution!

[RomRider]

@iantrich actually, I'll probably have to revert this commit... It breaks swipe-card and breaks compact-custom-header swiping between tabs.

The way it is handled on the entity card is not great... Each entry should manage its own actions and currently it's the entity card which manages that by catching the event from a child object... Not the best design ever :(

[iantrich]

agreed, core should probably be refactored

[RomRider]

@hcoohb, I'll have to revert this unfortunately as it creates a lot of side effects (swipe not working anymore, double clicks when changing tabs, etc...)

Regarding your use case, if you already have a vertical-stack-in-card around why not do (excluding the vertical-stack-in-card you already have):

- type: vertical-stack
  cards:
    # That one for the icon
    - type: custom:button-card
      icon: mdi:whatever
      show_name: false
      tap_action:
        action: toggle
        entity: your_entity
    # That one for the name
    - type: custom:button-card
       show_icon: false
       name: your name
       tap_action:
         action: url
         ....

And then apply a style to each button instead of using card-mod.