search

custom-cards / button-card

❇️ Lovelace button-card for home assistant
MIT License
1.91k stars 232 forks source link

Button-card in popup activate itself when it called by a button-card #514

Open KaoruKanon opened 2 years ago

KaoruKanon commented 2 years ago

Checklist

Describe the bug

When I open a popup with browser_mod from a button-card, the button-car in the popup activates itself and I can't activate it myself. The problem does not occur with a type: button

Version of the card Version: 3.4.2

To Reproduce This is the configuration I used: ui-lovelace.yaml (the part of concened) 

          - type: custom:button-card
            entity: script.home_arrive
            name: Maison
            hold_action: !include popup/maison_data_kwh.yaml
            template:
              - base
              - icon_home

maison_data_kwh.yaml (please look the end):

              action: fire-dom-event
              browser_mod:
                command: popup
                title: "La consommation électrique en kWh"
                style: ':host .content {width: 38em;}'
                card:
                  type: custom:stack-in-card
                  cards:

                    - type: horizontal-stack
                      cards:
                        - type: entities
                          entities:
                            - entity: sensor.enedis_kwh_year
                          style: |
                            :host {
                            --paper-item-icon-color: #405914;
                             }
                            ha-card {
                            margin-left: 50%;
                             }

                        - type: entities
                          entities:
                            - entity: sensor.enedis_kwh_last_year
                          style: |
                            :host {
                            --paper-item-icon-color: #323637;
                             }

                    - type: custom:mod-card
                      style: |
                        ha-card {
                          padding: 0em 3em 0em 1.2em;
                          margin-top: -1em;
                          margin-bottom: -1.5em;
                        }
                      card:
                        type: horizontal-stack
                        cards:

                          - type: custom:bar-card
                            entity: sensor.enedis_kwh_1
                            color: 'var(--kwh_bar)'
                            max: 423
                            direction: up
                            positions:
                              icon: off
                            height: 18em
                            width: 1.8em
                            style: |
                              :host {
                                {% if strptime(states('sensor.enedis_kwh').split(',')[0].split(' ')[1], '%Y').split('-')[0] |
                                int >= strptime(states('sensor.date').split(',')[0].split(' ')[0], '%Y').split('-')[0] | int %}
                                --kwh_bar: #405914;
                                {% else %}
                                --kwh_bar: #323637;
                                {% endif %}
                                --pos: {{ states('sensor.enedis_kwh').split(',')[0].split(' ')[2] | int /23 }}em;
                              }
                              bar-card-name, bar-card-iconbar {
                                padding-left: 0 !important;
                              }
                              bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
                              bar-card-indicatorcontainer, bar-card-indicator {
                                border-radius: .3em;
                              }
                              bar-card-value {
                                color: var(--kwh_bar) !important;
                                filter: brightness(1.5);
                                font-size: 1em;
                                text-shadow: none;
                                font-weight: 500 !important;
                                margin-bottom: var(--pos);
                                margin-left: auto;
                              }
                              bar-card-background {
                                background: none !important;
                                box-shadow: none !important;
                              }
                              bar-card-title {
                                overflow: visible;
                                margin-left: auto;
                                margin-top: -1.5em;
                              }

                          - type: custom:bar-card
                            entity: sensor.enedis_kwh_2
                            color: 'var(--kwh_bar)'
                            max: 423
                            direction: up
                            positions:
                              icon: off
                            height: 18em
                            width: 1.8em
                            style: |
                              :host {
                                {% if strptime(states('sensor.enedis_kwh').split(',')[1].split(' ')[1], '%Y').split('-')[0] |
                                int >= strptime(states('sensor.date').split(',')[0].split(' ')[0], '%Y').split('-')[0] | int %}
                                --kwh_bar: #405914;
                                {% else %}
                                --kwh_bar: #323637;
                                {% endif %}
                                --pos: {{ states('sensor.enedis_kwh').split(',')[1].split(' ')[2] | int /23 }}em;
                              }
                              bar-card-name, bar-card-iconbar {
                                padding-left: 0 !important;
                              }
                              bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
                              bar-card-indicatorcontainer, bar-card-indicator {
                                border-radius: .3em;
                              }
                              bar-card-value {
                                color: var(--kwh_bar) !important;
                                filter: brightness(1.5);
                                font-size: 1em;
                                text-shadow: none;
                                font-weight: 500 !important;
                                margin-bottom: var(--pos);
                                margin-left: auto;
                              }
                              bar-card-background {
                                background: none !important;
                                box-shadow: none !important;
                              }
                              bar-card-title {
                                overflow: visible;
                                margin-left: auto;
                                margin-top: -1.5em;
                              }

                          - type: custom:bar-card
                            entity: sensor.enedis_kwh_3
                            color: 'var(--kwh_bar)'
                            max: 423
                            direction: up
                            positions:
                              icon: off
                            height: 18em
                            width: 1.8em
                            style: |
                              :host {
                                {% if strptime(states('sensor.enedis_kwh').split(',')[2].split(' ')[1], '%Y').split('-')[0] |
                                int >= strptime(states('sensor.date').split(',')[0].split(' ')[0], '%Y').split('-')[0] | int %}
                                --kwh_bar: #405914;
                                {% else %}
                                --kwh_bar: #323637;
                                {% endif %}
                                --pos: {{ states('sensor.enedis_kwh').split(',')[2].split(' ')[2] | int /23 }}em;
                              }
                              bar-card-name, bar-card-iconbar {
                                padding-left: 0 !important;
                              }
                              bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
                              bar-card-indicatorcontainer, bar-card-indicator {
                                border-radius: .3em;
                              }
                              bar-card-value {
                                color: var(--kwh_bar) !important;
                                filter: brightness(1.5);
                                font-size: 1em;
                                text-shadow: none;
                                font-weight: 500 !important;
                                margin-bottom: var(--pos);
                                margin-left: auto;
                              }
                              bar-card-background {
                                background: none !important;
                                box-shadow: none !important;
                              }
                              bar-card-title {
                                overflow: visible;
                                margin-left: auto;
                                margin-top: -1.5em;
                              }

                          - type: custom:bar-card
                            entity: sensor.enedis_kwh_4
                            color: 'var(--kwh_bar)'
                            max: 423
                            direction: up
                            positions:
                              icon: off
                            height: 18em
                            width: 1.8em
                            style: |
                              :host {
                                {% if strptime(states('sensor.enedis_kwh').split(',')[3].split(' ')[1], '%Y').split('-')[0] |
                                int >= strptime(states('sensor.date').split(',')[0].split(' ')[0], '%Y').split('-')[0] | int %}
                                --kwh_bar: #405914;
                                {% else %}
                                --kwh_bar: #323637;
                                {% endif %}
                                --pos: {{ states('sensor.enedis_kwh').split(',')[3].split(' ')[2] | int /23 }}em;
                              }
                              bar-card-name, bar-card-iconbar {
                                padding-left: 0 !important;
                              }
                              bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
                              bar-card-indicatorcontainer, bar-card-indicator {
                                border-radius: .3em;
                              }
                              bar-card-value {
                                color: var(--kwh_bar) !important;
                                filter: brightness(1.5);
                                font-size: 1em;
                                text-shadow: none;
                                font-weight: 500 !important;
                                margin-bottom: var(--pos);
                                margin-left: auto;
                              }
                              bar-card-background {
                                background: none !important;
                                box-shadow: none !important;
                              }
                              bar-card-title {
                                overflow: visible;
                                margin-left: auto;
                                margin-top: -1.5em;
                              }

                          - type: custom:bar-card
                            entity: sensor.enedis_kwh_5
                            color: 'var(--kwh_bar)'
                            max: 423
                            direction: up
                            positions:
                              icon: off
                            height: 18em
                            width: 1.8em
                            style: |
                              :host {
                                {% if strptime(states('sensor.enedis_kwh').split(',')[4].split(' ')[1], '%Y').split('-')[0] |
                                int >= strptime(states('sensor.date').split(',')[0].split(' ')[0], '%Y').split('-')[0] | int %}
                                --kwh_bar: #405914;
                                {% else %}
                                --kwh_bar: #323637;
                                {% endif %}
                                --pos: {{ states('sensor.enedis_kwh').split(',')[4].split(' ')[2] | int /23 }}em;
                              }
                              bar-card-name, bar-card-iconbar {
                                padding-left: 0 !important;
                              }
                              bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
                              bar-card-indicatorcontainer, bar-card-indicator {
                                border-radius: .3em;
                              }
                              bar-card-value {
                                color: var(--kwh_bar) !important;
                                filter: brightness(1.5);
                                font-size: 1em;
                                text-shadow: none;
                                font-weight: 500 !important;
                                margin-bottom: var(--pos);
                                margin-left: auto;
                              }
                              bar-card-background {
                                background: none !important;
                                box-shadow: none !important;
                              }
                              bar-card-title {
                                overflow: visible;
                                margin-left: auto;
                                margin-top: -1.5em;
                              }

                          - type: custom:bar-card
                            entity: sensor.enedis_kwh_6
                            color: 'var(--kwh_bar)'
                            max: 423
                            direction: up
                            positions:
                              icon: off
                            height: 18em
                            width: 1.8em
                            style: |
                              :host {
                                {% if strptime(states('sensor.enedis_kwh').split(',')[5].split(' ')[1], '%Y').split('-')[0] |
                                int >= strptime(states('sensor.date').split(',')[0].split(' ')[0], '%Y').split('-')[0] | int %}
                                --kwh_bar: #405914;
                                {% else %}
                                --kwh_bar: #323637;
                                {% endif %}
                                --pos: {{ states('sensor.enedis_kwh').split(',')[5].split(' ')[2] | int /23 }}em;
                              }
                              bar-card-name, bar-card-iconbar {
                                padding-left: 0 !important;
                              }
                              bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
                              bar-card-indicatorcontainer, bar-card-indicator {
                                border-radius: .3em;
                              }
                              bar-card-value {
                                color: var(--kwh_bar) !important;
                                filter: brightness(1.5);
                                font-size: 1em;
                                text-shadow: none;
                                font-weight: 500 !important;
                                margin-bottom: var(--pos);
                                margin-left: auto;
                              }
                              bar-card-background {
                                background: none !important;
                                box-shadow: none !important;
                              }
                              bar-card-title {
                                overflow: visible;
                                margin-left: auto;
                                margin-top: -1.5em;
                              }

                          - type: custom:bar-card
                            entity: sensor.enedis_kwh_7
                            color: 'var(--kwh_bar)'
                            max: 423
                            direction: up
                            positions:
                              icon: off
                            height: 18em
                            width: 1.8em
                            style: |
                              :host {
                                {% if strptime(states('sensor.enedis_kwh').split(',')[6].split(' ')[1], '%Y').split('-')[0] |
                                int >= strptime(states('sensor.date').split(',')[0].split(' ')[0], '%Y').split('-')[0] | int %}
                                --kwh_bar: #405914;
                                {% else %}
                                --kwh_bar: #323637;
                                {% endif %}
                                --pos: {{ states('sensor.enedis_kwh').split(',')[6].split(' ')[2] | int /23 }}em;
                              }
                              bar-card-name, bar-card-iconbar {
                                padding-left: 0 !important;
                              }
                              bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
                              bar-card-indicatorcontainer, bar-card-indicator {
                                border-radius: .3em;
                              }
                              bar-card-value {
                                color: var(--kwh_bar) !important;
                                filter: brightness(1.5);
                                font-size: 1em;
                                text-shadow: none;
                                font-weight: 500 !important;
                                margin-bottom: var(--pos);
                                margin-left: auto;
                              }
                              bar-card-background {
                                background: none !important;
                                box-shadow: none !important;
                              }
                              bar-card-title {
                                overflow: visible;
                                margin-left: auto;
                                margin-top: -1.5em;
                              }

                          - type: custom:bar-card
                            entity: sensor.enedis_kwh_8
                            color: 'var(--kwh_bar)'
                            max: 423
                            direction: up
                            positions:
                              icon: off
                            height: 18em
                            width: 1.8em
                            style: |
                              :host {
                                {% if strptime(states('sensor.enedis_kwh').split(',')[7].split(' ')[1], '%Y').split('-')[0] |
                                int >= strptime(states('sensor.date').split(',')[0].split(' ')[0], '%Y').split('-')[0] | int %}
                                --kwh_bar: #405914;
                                {% else %}
                                --kwh_bar: #323637;
                                {% endif %}
                                --pos: {{ states('sensor.enedis_kwh').split(',')[7].split(' ')[2] | int /23 }}em;
                              }
                              bar-card-name, bar-card-iconbar {
                                padding-left: 0 !important;
                              }
                              bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
                              bar-card-indicatorcontainer, bar-card-indicator {
                                border-radius: .3em;
                              }
                              bar-card-value {
                                color: var(--kwh_bar) !important;
                                filter: brightness(1.5);
                                font-size: 1em;
                                text-shadow: none;
                                font-weight: 500 !important;
                                margin-bottom: var(--pos);
                                margin-left: auto;
                              }
                              bar-card-background {
                                background: none !important;
                                box-shadow: none !important;
                              }
                              bar-card-title {
                                overflow: visible;
                                margin-left: auto;
                                margin-top: -1.5em;
                              }

                          - type: custom:bar-card
                            entity: sensor.enedis_kwh_9
                            color: 'var(--kwh_bar)'
                            max: 423
                            direction: up
                            positions:
                              icon: off
                            height: 18em
                            width: 1.8em
                            style: |
                              :host {
                                {% if strptime(states('sensor.enedis_kwh').split(',')[8].split(' ')[1], '%Y').split('-')[0] |
                                int >= strptime(states('sensor.date').split(',')[0].split(' ')[0], '%Y').split('-')[0] | int %}
                                --kwh_bar: #405914;
                                {% else %}
                                --kwh_bar: #323637;
                                {% endif %}
                                --pos: {{ states('sensor.enedis_kwh').split(',')[8].split(' ')[2] | int /23 }}em;
                              }
                              bar-card-name, bar-card-iconbar {
                                padding-left: 0 !important;
                              }
                              bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
                              bar-card-indicatorcontainer, bar-card-indicator {
                                border-radius: .3em;
                              }
                              bar-card-value {
                                color: var(--kwh_bar) !important;
                                filter: brightness(1.5);
                                font-size: 1em;
                                text-shadow: none;
                                font-weight: 500 !important;
                                margin-bottom: var(--pos);
                                margin-left: auto;
                              }
                              bar-card-background {
                                background: none !important;
                                box-shadow: none !important;
                              }
                              bar-card-title {
                                overflow: visible;
                                margin-left: auto;
                                margin-top: -1.5em;
                              }

                          - type: custom:bar-card
                            entity: sensor.enedis_kwh_10
                            color: 'var(--kwh_bar)'
                            max: 423
                            direction: up
                            positions:
                              icon: off
                            height: 18em
                            width: 1.8em
                            style: |
                              :host {
                                {% if strptime(states('sensor.enedis_kwh').split(',')[9].split(' ')[1], '%Y').split('-')[0] |
                                int >= strptime(states('sensor.date').split(',')[0].split(' ')[0], '%Y').split('-')[0] | int %}
                                --kwh_bar: #405914;
                                {% else %}
                                --kwh_bar: #323637;
                                {% endif %}
                                --pos: {{ states('sensor.enedis_kwh').split(',')[9].split(' ')[2] | int /23 }}em;
                              }
                              bar-card-name, bar-card-iconbar {
                                padding-left: 0 !important;
                              }
                              bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
                              bar-card-indicatorcontainer, bar-card-indicator {
                                border-radius: .3em;
                              }
                              bar-card-value {
                                color: var(--kwh_bar) !important;
                                filter: brightness(1.5);
                                font-size: 1em;
                                text-shadow: none;
                                font-weight: 500 !important;
                                margin-bottom: var(--pos);
                                margin-left: auto;
                              }
                              bar-card-background {
                                background: none !important;
                                box-shadow: none !important;
                              }
                              bar-card-title {
                                overflow: visible;
                                margin-left: auto;
                                margin-top: -1.5em;
                              }

                          - type: custom:bar-card
                            entity: sensor.enedis_kwh_11
                            color: 'var(--kwh_bar)'
                            max: 423
                            direction: up
                            positions:
                              icon: off
                            height: 18em
                            width: 1.8em
                            style: |
                              :host {
                                {% if strptime(states('sensor.enedis_kwh').split(',')[10].split(' ')[1], '%Y').split('-')[0] |
                                int >= strptime(states('sensor.date').split(',')[0].split(' ')[0], '%Y').split('-')[0] | int %}
                                --kwh_bar: #405914;
                                {% else %}
                                --kwh_bar: #323637;
                                {% endif %}
                                --pos: {{ states('sensor.enedis_kwh').split(',')[10].split(' ')[2] | int /23 }}em;
                              }
                              bar-card-name, bar-card-iconbar {
                                padding-left: 0 !important;
                              }
                              bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
                              bar-card-indicatorcontainer, bar-card-indicator {
                                border-radius: .3em;
                              }
                              bar-card-value {
                                color: var(--kwh_bar) !important;
                                filter: brightness(1.5);
                                font-size: 1em;
                                text-shadow: none;
                                font-weight: 500 !important;
                                margin-bottom: var(--pos);
                                margin-left: auto;
                              }
                              bar-card-background {
                                background: none !important;
                                box-shadow: none !important;
                              }
                              bar-card-title {
                                overflow: visible;
                                margin-left: auto;
                                margin-top: -1.5em;
                              }

                          - type: custom:bar-card
                            entity: sensor.enedis_kwh_12
                            color: 'var(--kwh_bar)'
                            max: 423
                            direction: up
                            positions:
                              icon: off
                            height: 18em
                            width: 1.8em
                            style: |
                              :host {
                                {% if strptime(states('sensor.enedis_kwh').split(',')[11].split(' ')[1], '%Y').split('-')[0] |
                                int >= strptime(states('sensor.date').split(',')[0].split(' ')[0], '%Y').split('-')[0] | int %}
                                --kwh_bar: #405914;
                                {% else %}
                                --kwh_bar: #323637;
                                {% endif %}
                                --pos: {{ states('sensor.enedis_kwh').split(',')[11].split(' ')[2] | int /23 }}em;
                              }
                              bar-card-name, bar-card-iconbar {
                                padding-left: 0 !important;
                              }
                              bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
                              bar-card-indicatorcontainer, bar-card-indicator {
                                border-radius: .3em;
                              }
                              bar-card-value {
                                color: var(--kwh_bar) !important;
                                filter: brightness(1.5);
                                font-size: 1em;
                                text-shadow: none;
                                font-weight: 500 !important;
                                margin-bottom: var(--pos);
                                margin-left: auto;
                              }
                              bar-card-background {
                                background: none !important;
                                box-shadow: none !important;
                              }
                              bar-card-title {
                                overflow: visible;
                                margin-left: auto;
                                margin-top: -1.5em;
                              }

                    - type: horizontal-stack
                      cards:
                        - type: entities
                          entities:
                            - entity: sensor.enedis_kwh_last_month_last_year_kwh
                            - entity: sensor.enedis_kwh_diff_last_month_and_last_year
                          style: |
                            ha-card {
                              margin-bottom: 1.5em
                            }

                        - type: entities
                          entities:
                            - entity: sensor.enedis_kwh_last_month_price
                            - entity: sensor.enedis_kwh_total_year_kwh
                          style: |
                            ha-card {
                              margin-bottom: 1.5em
                            }

                    - type: custom:button-card
                      name: Mettre à jour les horaires
                      icon: mdi:refresh
                      style: |
                        ha-card {
                          margin-left: 70%;
                          margin-bottom: 1em;
                          background: #2e3333 !important;
                          border-radius: 0.6em !important;
                          margin-top: -20px;
                        }
                      tap_action:
                        - services: |
                              [[[
                                hass.callService('browser_mod', 'toast', {
                                  message: 'Rafraîchissement de la consommation...'
                                });
                              ]]]
                      template: icon_name

Screenshots issue

Expected behavior When I do a long click on the first button-card, it opens the popup and then I can click the button-card of the popup that does actions

Desktop:

All Other device is concerned

matt8707 commented 2 years ago

https://github.com/custom-cards/button-card/issues/507

RomRider commented 2 years ago

A template in any service will be called on button initial render. That is because I need to verify what the user wants to do and disable pointer-events in certain cases.

Why use hass.callService ? You can simply assign this as your tap_action:

                    - type: custom:button-card
                      name: Mettre à jour les horaires
                      icon: mdi:refresh
                      style: |
                        ha-card {
                          margin-left: 70%;
                          margin-bottom: 1em;
                          background: #2e3333 !important;
                          border-radius: 0.6em !important;
                          margin-top: -20px;
                        }
                      tap_action:
                        action: call-service
                        service: browser_mod.toast
                        service_data: 'Rafraîchissement de la consommation...'
                      template: icon_name