Lack of refresh in popups when using custom:button-card

[dcapslock]

button-card 4.2.0 is now released which supports nested javascript templates. This is now the offical solution to this issue.

If you are using custom:button-card in a popup and not seeing entities refresh, this is due to how button-card works, and is not a Browser Mod issue.

This issue is to do with how button-card works with its javascript templates, evaluating them across the entire config and not stopping on nested actions. See below for example yaml config that highlights the issue, and a suggested work around.

Standard button card with popup action

In this case the button-card name updates correctly.

type: button
entity: light.bed_light
tap_action:
  action: call-service
  service: browser_mod.popup
  data:
    title: Test Popup
    content:
      type: custom:button-card
      entity: light.bed_light
      name: |
        [[[
          // name changes with state just to make updates visible
          return entity?.state === 'on' ? 'Light On' : 'Light Off';
        ]]]

button-card with popup with button-card

In this case, the light will toggle fine, but the name will not. If you inspect the DOM of the popup you will see that it has the config of name: Light On or name: Light Off depending on the state of the light when the popup was called.

type: custom:button-card
entity: light.bed_light
tap_action:
  action: call-service
  service: browser_mod.popup
  data:
    title: Test Popup
    content:
      type: custom:button-card
      entity: light.bed_light
      name: |
        [[[
          // name changes with state just to make updates visible
          return entity?.state === 'on' ? 'Light On' : 'Light Off';
        ]]]

button-card with popup button-card and template returning a template

In this case, the light and name will both correctly toggle. You will see that the button-card in the popup returns a template, such that the button-card on the popup indeed uses this template.

type: custom:button-card
entity: light.bed_light
tap_action:
  action: call-service
  service: browser_mod.popup
  data:
    title: Test Popup
    content:
      type: custom:button-card
      entity: light.bed_light
      name: |
        [[[
          // name changes with state just to make updates visible
          let template = "[[[ return entity?.state === 'on' ? 'Light On' : 'Light Off'; ]]]";
          return template;
        ]]]

[dcapslock]

FYI: working with button-card to have infinite templates. So likely in this case you will be able to use [[[[ JavaScript ]]]] and it will shave one layer of [] off and leave the rest intact.