Popup Card - Templated styles not updated until page refresh

[jordanryle]

Describe the Bug
I am seeing an issue where with a pop-up card, any elements that have template-based formulae relying on another entity do not update when the template value has changed.

In the code below, I am using a popup card to display a remote, with a picture-entities card showing the remote activity, and buttons that may be visible or omitted based upon the activity. The picture-entities card updates when an activity is changed, but the styling and layout of the other buttons don't change until I refresh the page. Even if I close and re-open the popup, it is still the same.

I have marked the template functions that are not applied when a sensor updates with the comment "This value isn't updated on the popup..." below.

To Reproduce
Steps to reproduce the behavior:

1. Create a Pop-Up card that has an style attribute dependent on a template
2. Change the dependent template entity in another window
3. New style based on state change is not applied to the pop-up card until the page is refreshed

YAML

/* Note: Some code irrelevant to this issue has been omitted for clarity */

/* Pop-up card */
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: '#lrremote'
            bg_color: var(--popupBG)
            bg_opacity: 40
            bg_blur: 10
            shadow_opacity: 0
            margin_top_mobile: calc(0vh)
            background_update: true
          - type: custom:gap-card
            height: 10px
          - type: custom:button-card
            template: remote_card
            variables:
              remote_entity: remote.living_room_hub
              activity_sensor_entity: sensor.living_room_hub_activity
              activity_select_entity: select.living_room_hub_activities

/* Remote_Card Template code */
button_card_templates:
  remote_card:
    variables:
      remote_entity: null
      activity_sensor_entity: null
      activity_select_entity: null
    custom_fields:
      picture:
        card:
          type: picture-entity
          entities: []
          state_image:
            PowerOff: /local/power_off_2.png
            Kodi: /local/kodi_logo_2.png
            Nintendo Switch: /local/switch_logo_2.png
            PS4: /local/ps4_logo_2.png
            N64: /local/n64_logo_2.png
            Turntable: /local/turntable_2.png
            Nvidia: /local/nvidia_logo.png
            Plex: /local/plex_logo.png
            Disney_Plus: /local/disney_logo.png
            Netflix: /local/netflix_logo.png
            HBOGo: /local/hbogo_logo.png
            HBOMax: /local/hbomax_logo.png
            YouTube: /local/youtube_logo.png
            Amazon: /local/amazon_logo.png
            Hulu: /local/hulu_logo.png
            Pluto: /local/pluto_logo.png
          entity: '[[[ return variables.activity_sensor_entity ]]]'
          show_name: false
          show_state: false
          fit_mode: contain
      activities:
        card:
          type: custom:button-card
          custom_fields:
            power:
              card:
                type: custom:button-card
                template: activity_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  activity_sensor: '[[[ return variables.activity_select_entity ]]]'
                  activity: power_off
                  icon: mdi:power
            shield:
              card:
                type: custom:button-card
                template: activity_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  activity_sensor: '[[[ return variables.activity_select_entity ]]]'
                  activity: SHIELD TV
                  icon: mdi:shield-outline
            switch:
              card:
                type: custom:button-card
                template: activity_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  activity_sensor: '[[[ return variables.activity_select_entity ]]]'
                  activity: Nintendo Switch
                  icon: mdi:nintendo-switch
            n64:
              card:
                type: custom:button-card
                template: activity_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  activity_sensor: '[[[ return variables.activity_select_entity ]]]'
                  activity: N64
                  icon: mdi:gamepad-outline
            ps4:
              card:
                type: custom:button-card
                template: activity_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  activity_sensor: '[[[ return variables.activity_select_entity ]]]'
                  activity: PS4
                  icon: mdi:sony-playstation
            lp:
              card:
                type: custom:button-card
                template: activity_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  activity_sensor: '[[[ return variables.activity_select_entity ]]]'
                  activity: Turntable
                  icon: mdi:record-player
                styles:
                  card:
            vcr:
              card:
                type: custom:button-card
                template: activity_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  activity_sensor: '[[[ return variables.activity_select_entity ]]]'
                  activity: VCR
                  icon: mdi:vhs
          styles:
            grid:
              - grid-template-columns: |
                  [[[
                    if (variables.remote_entity === 'remote.living_room_hub')
                      return 'repeat(7,1fr)';
                    else
                      return 'repeat(3,1fr)';
                  ]]]
              - grid-template-rows: min-content
              - grid-template-areas: |
                  [[[
                    if (variables.remote_entity === 'remote.living_room_hub')
                      return '"power shield switch n64 ps4 lp vcr"';
                    else
                      return '"power shield switch"';
                  ]]]
              - gap: 0px 8px
            card:
              - padding: 4px
/* Only one button cluster included here for brevity */
      play_controls:
        card:
          type: custom:button-card
          custom_fields:
            prev:
              card:
                type: custom:button-card
                template: media_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  device: NVIDIA Game Console
                  tap_command: PreviousTrack
                  icon: mdi:skip-previous
            rew:
              card:
                type: custom:button-card
                template: media_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  device: NVIDIA Game Console
                  tap_command: Rewind
                  icon: mdi:rewind
            play:
              card:
                type: custom:button-card
                template: media_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  device: NVIDIA Game Console
                  tap_command: Pause
                  icon: mdi:play-pause
            stop:
              card:
                type: custom:button-card
                template: media_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  device: NVIDIA Game Console
                  tap_command: Stop
                  icon: mdi:stop
            ff:
              card:
                type: custom:button-card
                template: media_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  device: NVIDIA Game Console
                  tap_command: FastForward
                  icon: mdi:fast-forward
            next:
              card:
                type: custom:button-card
                template: media_button
                variables:
                  remote: '[[[ return variables.remote_entity ]]]'
                  device: NVIDIA Game Console
                  tap_command: NextTrack
                  icon: mdi:skip-next
          styles:
            grid:
              - grid-template-columns: repeat(6,1fr)
              - grid-template-rows: min-content
              - grid-template-areas: '"prev rew play stop ff next"'
              - gap: 3%
            card:
              - padding: 4px
          styles:
            grid:
              - grid-template-columns: repeat(3,1fr)
              - grid-template-rows: min-content
              - grid-template-areas: '"mute vdown vup"'
              - gap: 0px
            card:
              - padding: 4px
    styles:
      grid:
        - grid-template-columns: 100%
        - grid-template-rows: repeat(auto,min-content)

/* This layout isn't updated on the popup when the activity_select_entity changes */
        - grid-template-areas: |
            [[[
              if (states[variables.activity_select_entity].state === 'power_off')
                return '"picture" "activities"';
              else if (states[variables.activity_select_entity].state === 'SHIELD TV')
                return '"picture" "activities" "home_menu" "play_controls" "controls" "colors" "kodi"';
              else
                return '"picture" "activities" "volume_controls"'
            ]]]          

/* Activity Button Template */
  activity_button:
    variables:
      remote: null
      activity_sensor: null
      activity: null
      icon: null
    icon: '[[[ return variables.icon ]]]'
    styles:
      card:

/* This value isn't updated on the popup when the activity_sensor_entity changes */
        - background: |
            [[[
              if (states[variables.activity_sensor].state === variables.activity)
                return "var(--gray800)";
              return "var(--gray000)";
            ]]]
      icon:

/* This value isn't updated on the popup when the activity_sensor_entity changes */
        - color: |
            [[[
              if (states[variables.activity_sensor].state === variables.activity)
                return "var(--gray000)";
              return "var(--gray800)";
            ]]]
    tap_action:
      action: perform-action
      perform_action: select.select_option
      target:
        entity_id: '[[[ return variables.activity_sensor ]]]'
      data:
        option: '[[[ return variables.activity ]]]'

/* Media Button Template */
  media_button:
    variables:
      remote: null
      device: null
      tap_command: ''
      icon: null
    icon: '[[[ return variables.icon ]]]'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        entity_id: '[[[ return variables.remote ]]]'
        device: '[[[ return variables.device ]]]'
        command: '[[[ return variables.tap_command ]]]'

Information:

• OS: PC, iOS
• Browser/App: Brave [PC], HASS app [iOS]
• Bubble Card version: 2.2.4
• Home Assistant version: 2024.8.3

Screenshots: The remote with SHIELD TV activity active:

Changing to the Nintendo Switch activity (picture-entity updates, other icons do not):

After refreshing the page (correct states and layout shown):

Thank you for your amazing work on this card!

[jordanryle]

Bumping to confirm that this issues is still present with Bubble Card v2.3.0-beta.1 installed

[Clooos]

Hi, I'm working on an other issue that might fix this, in the pop-up settings there is an option to let it update in background, in fact this option is not doing anything since the v2.0.0 😅 I really hope that fixing this and enabling it for your pop-up is the solution.

[jordanryle]

Unfortunately, it does not appear the v2.3.0-beta.2 has resolved this issue. The card does not update styling until the entire page is refreshed.

[Clooos]

Have you tried to toggle the Update pop-up in background option in the editor?

[jordanryle]

I have yes, and confirmed that background_update: true was present in the YAML. I have tried clearing the browser cache as well, but unfortunately the issue persists. I appreciate your help trying to solve this!

[Clooos]

Another issue is that button-card is not maintened anymore, I understand that it is working outside of a pop-up but have you considered migrating all of this to Bubble Card?

[jordanryle]

tl;dr for people coming across a similar issue and just want the result: take a look at triggers_update as a part of the button card documentation.

Longer explanation:

Thanks @Clooos for your suggestion as it led me down a rabbit hole to figure this out!

I had already done quite a bit of setup work with button card templates that wouldn't translate easily to Bubble Card as you suggested, but then I realized I never tried the card outside of a popup. I copied all the code to a different layout, and lo-and-behold it still didn't update! Apologies I never tried this and blamed Bubble Card!

Once I realized the problem was with button card and not Bubble Card, it led me to the triggers_update parameter, and once I added

    triggers_update:
      - '[[[ return variables.activity_sensor ]]]'

to both the remote_card template and the activity_button template, this card worked flawlessly.

I copied it back to the popup, and voila it worked!

Please consider this issue closed, and appreciate the great work on the Bubble Card!

[Clooos]

That's the kind of issue ending I like the most 😁

Glad that I helped you figuring this out!