custom-cards / button-card

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

Tap action inside browser-mod's popup window doesn't work #730

Closed Protoncek closed 1 year ago

Protoncek commented 1 year ago

Checklist

Describe the bug in v.4.0.0 tap action doesn't work in card-mod popup - when click on the card nothing happens

Version of the card 4.0.0.dev11

To Reproduce This is the configuration I used:

type: custom:button-card
styles:
  card:
    - height: 75px
    - background-size: 100% 100%
    - box-shadow: inset 0 0 2px 4px red
    - background-image: |
        [[[
          if(states['sensor.trenutna_postaja_num'].state=="1")
            return 'url("/local/pictures/veseljak.jpg")'
        else
          if(states['sensor.trenutna_postaja_num'].state=="2")
            return 'url("/local/pictures/radio1.jpg")'              
        else
          if(states['sensor.trenutna_postaja_num'].state=="3")
            return 'url("/local/pictures/radio1-80ta.jpg")'              
        else
          if(states['sensor.trenutna_postaja_num'].state=="4")
            return 'url("/local/pictures/aktual.jpg")'
        else
          if(states['sensor.trenutna_postaja_num'].state=="5")
            return 'url("/local/pictures/ekspres.jpg")' 
        else
          return 'url("/local/pictures/protoncek.jpg")'
        ]]]
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      style: |
        --popup-border-color: lime;
        --popup-border-width: 40px;
        --popup-background-color: blue;
        --popup-max-width: 1600px;
      autoclose: true
      timeout: 10000
      content:
        type: vertical-stack
        cards:
          - type: custom:button-card
            name: 'Izberi postajo: '
            styles:
              card:
                - font-size: 100px
                - font-weight: bold
                - border-radius: 30px
                - color: white
                - background: blue
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                tap_action:
                  action: call-service
                  service: script.radio_dnevna_veseljak
                styles:
                  card:
                    - height: 100px
                    - background-image: url("/local/pictures/veseljak.jpg")
                    - background-size: 100% 100%
                    - box-shadow: |
                        [[[
                          if(states['sensor.trenutna_postaja_num'].state=="1")
                            return '0 0 10px 10px  red'
                          else
                            return 'none'
                        ]]]
              - type: custom:button-card
                tap_action:
                  action: call-service
                  service: script.radio_dnevna_ena
                styles:
                  card:
                    - height: 100px
                    - background-image: url("/local/pictures/radio1.jpg")
                    - background-size: 100% 100%
                    - box-shadow: |
                        [[[
                          if(states['sensor.trenutna_postaja_num'].state=="2")
                            return '0 0 10px 10px  red'
                          else
                            return 'none'
                        ]]]
              - type: custom:button-card
                tap_action:
                  action: call-service
                  service: script.radio_dnevna_dve
                styles:
                  card:
                    - height: 100px
                    - background-image: url("/local/pictures/radio1-80ta.jpg")
                    - background-size: 100% 100%
                    - box-shadow: |
                        [[[
                          if(states['sensor.trenutna_postaja_num'].state=="3")
                            return '0 0 10px 10px  red'
                          else
                            return 'none'
                        ]]]
              - type: custom:button-card
                tap_action:
                  action: call-service
                  service: script.radio_dnevna_aktual
                styles:
                  card:
                    - height: 100px
                    - background-image: url("/local/pictures/aktual.jpg")
                    - background-size: 100% 100%
                    - box-shadow: |
                        [[[
                          if(states['sensor.trenutna_postaja_num'].state=="4")
                            return '0 0 10px 10px  red'
                          else
                            return 'none'
                        ]]]
              - type: custom:button-card
                tap_action:
                  action: call-service
                  service: script.radio_dnevna_ekspres
                styles:
                  card:
                    - height: 100px
                    - background-image: url("/local/pictures/ekspres.jpg")
                    - background-size: 100% 100%
                    - box-shadow: |
                        [[[
                          if(states['sensor.trenutna_postaja_num'].state=="5")
                            return '0 0 10px 10px  red'
                          else
                            return 'none'
                        ]]]

Expected behavior When i click on one of the cards assigne "tap_action" should execute, but nothing happens

Desktop (please complete the following information):

RomRider commented 1 year ago

You're not running the latest version of browser-mod. browser_mod < 2.3.0 has issues with latest HA. This has nothing to do with button-card.

(Note: I've tested 2.2.2 with your config and it indeed doesn't work, but works with 2.3.0)

Protoncek commented 1 year ago

Hm... yes, i do have browser mod 2.3.0 installed... that's very odd... only thing i DON'T have is registered in browser-mod. image

RomRider commented 1 year ago

That doesn't mean it's using the latest JS from browser_mod. Hard refresh/empty cache/check the JS console (it will probably still say 2.2.2)

Protoncek commented 1 year ago

Yeah, i know that hard refresh is a must at every (bigger) change - for this i press F12, right-click on refresh and select "emtpy cache and hard refresh". But, funny thing... I made hard refresh (i do that after every addon update), but it didn't help. Then i reinstalled browser mod, made hard refresh again and now it works. Go figure...

But, thanks for finding the cause. And, above all: thanks for this card. It's waaay the most usable card in HA. I guess my HA consists around 70% with this card, so i was pretty frustrated back then when you "dissapeared" for a while and it stopped working (correctly).

RomRider commented 1 year ago

Thanks, I had no time to work on that, because life 🤷‍♂️ but now I'm rushing through some long standing issues and trying to make it work with latest HA versions... 😅