Button card doesn't appear inside conditional card/layout-card

[Spirituss]

Checklist

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

Describe the bug Button cards inside conditional card/layout-card/custom:stack-in-card often doesn't appear on the screen. The places where it should be are just clear. Sometimes after page hard refresh (shift-F5) it appears again but not always. Such symptoms started from HA 2021.12, earlier it works fine for more than a year.

Version of the card Version: 3.4.2

To Reproduce This is the configuration I used: lovelace yaml:

views: 
  - title: Octoprint
    icon: mdi:printer-3d
    panel: true 
    visible:
      - user: xxxxxx 
    cards:
      - type: custom:layout-card
        layout_type: vertical
        layout:
          width: 300
          max_cols: 2
        cards:  
          - type: conditional
            show_header_toggle: false
            conditions:
              - entity: switch.connection
                state: 'on'
            card:                
                type: custom:stack-in-card
                mode: vertical
                cards: 
                  - type: horizontal-stack
                     show_name: false   
                    cards:          
                      - type: custom:stack-in-card
                        mode: vertical
                        cards:                 
                          - type: custom:button-card
                            entity: sensor.printer_status
                            template: sensor  
                          - type: custom:button-card
                            entity: sensor.temperature_3dprinter
                            template: sensor_temp  
                      - type: custom:stack-in-card
                        mode: vertical
                        cards:    
.....

Screenshots If applicable, add screenshots to help explain your problem. It works often like this:

Expected behavior A clear and concise description of what you expected to happen. But should work like this:

Desktop (please complete the following information):

• Browser [e.g. chrome, safari] Opera
• Version [e.g. 22] 83.0.4254.27

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[suneworld]

Experiencing the same issue

[Spirituss]

@RomRider It would be great to fix the component. I widely use it and now it becomes almost non-working.

[RomRider]

Any error in the javascript console?

[RomRider]

As a side note, personally I have issues with all the cards which load other custom card. Something changed (again) in HA probably and it's hard to track down the reason...

[Spirituss]

As a side note, personally I have issues with all the cards which load other custom card. Something changed (again) in HA probably and it's hard to track down the reason...

auto-entities.js:210 ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'state') in 'if (entity.state == 'Backed up') return 'var(--lovelace-good-color)'; 
  else return 'var(--lovela...'
    at Je.eval (eval at _evalTemplate (:8719/hacsfiles/button-card/button-card.js:425:9295), <anonymous>:4:14)
    at Je._evalTemplate (:8719/hacsfiles/button-card/button-card.js:425:9379)
    at Je._getTemplateOrValue (:8719/hacsfiles/button-card/button-card.js:425:9964)
    at :8719/hacsfiles/button-card/button-card.js:425:12361
    at Array.forEach (<anonymous>)
    at Je._buildStyleGeneric (:8719/hacsfiles/button-card/button-card.js:425:12338)
    at Je._getIconHtml (:8719/hacsfiles/button-card/button-card.js:519:143)
    at Je._gridHtml (:8719/hacsfiles/button-card/button-card.js:499:511)
    at Je._buttonContent (:8719/hacsfiles/button-card/button-card.js:499:433)
    at Je._cardHtml (:8719/hacsfiles/button-card/button-card.js:479:18)
console.error @ auto-entities.js:210
auto-entities.js:210 ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'state') in 'if (states['sensor.gdrive_backup_state'].state == 'Backed up') return 'var(--lovelace-good-color)'...'
    at Je.eval (eval at _evalTemplate (:8719/hacsfiles/button-card/button-card.js:425:9295), <anonymous>:4:44)
    at Je._evalTemplate (:8719/hacsfiles/button-card/button-card.js:425:9379)
    at Je._getTemplateOrValue (:8719/hacsfiles/button-card/button-card.js:425:9964)
    at :8719/hacsfiles/button-card/button-card.js:425:12361
    at Array.forEach (<anonymous>)
    at Je._buildStyleGeneric (:8719/hacsfiles/button-card/button-card.js:425:12338)
    at Je._getIconHtml (:8719/hacsfiles/button-card/button-card.js:519:143)
    at Je._gridHtml (:8719/hacsfiles/button-card/button-card.js:499:511)
    at Je._buttonContent (:8719/hacsfiles/button-card/button-card.js:499:433)
    at Je._cardHtml (:8719/hacsfiles/button-card/button-card.js:479:18)
console.error @ auto-entities.js:210
auto-entities.js:210 ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'state') in 'if (entity.state > 0) return 'var(--lovelace-bad-color)'; 
  if (entity.state == 0) return 'var(--...'
    at Je.eval (eval at _evalTemplate (:8719/hacsfiles/button-card/button-card.js:425:9295), <anonymous>:4:14)
    at Je._evalTemplate (:8719/hacsfiles/button-card/button-card.js:425:9379)
    at Je._getTemplateOrValue (:8719/hacsfiles/button-card/button-card.js:425:9964)
    at :8719/hacsfiles/button-card/button-card.js:425:12361
    at Array.forEach (<anonymous>)
    at Je._buildStyleGeneric (:8719/hacsfiles/button-card/button-card.js:425:12338)
    at Je._getIconHtml (:8719/hacsfiles/button-card/button-card.js:519:143)
    at Je._gridHtml (:8719/hacsfiles/button-card/button-card.js:499:511)
    at Je._buttonContent (:8719/hacsfiles/button-card/button-card.js:499:433)
    at Je._cardHtml (:8719/hacsfiles/button-card/button-card.js:479:18)

[RomRider]

Seems like some of your JStemplates have issues (but this is for cards inside an auto-entities card): if (entity && entity.state == 0)instead of what you have.

Make sure your js templates are rock solid else this is also what can happen.

I'm going to check if I can reproduce in parallel.

[Spirituss]

Seems like some of your JStemplates have issues (but this is for cards inside an auto-entities card): if (entity && entity.state == 0)instead of what you have.

Make sure your js templates are rock solid else this is also what can happen.

I'm going to check if I can reproduce in parallel.

I've checked, this message was not connected with the issue. Still is the case.

[uvjim]

I've been experiencing this too and just put it down to a caching issue because sometimes a forced refresh works, also, having developer tools open and disabling the cache sometimes seems to work.

This also seems to manifest itself in the Card Configuration window in Lovelace.

Anyway to help me see if the card just wasn't building I added a background colour to the stack-in-card just to be safe. Here's what I have found so far...

1. Nothing in the Developer Tools console that would indicate an error.
2. When the problem occurs this is what it looks like

3. In the Developer Tools I can see the elements tab shows the following...

4. When highlighting one of the button-card elements the config for the card looks like this...

So at first glance all the card info looks to be there, it just isn't rendering.

Hope that helps to track it down.

YAML for the card...

type: custom:auto-entities
card:
  type: custom:stack-in-card
  mode: horizontal
  keep:
    margin: true
  card_mod:
    style: |
      ha-card { box-shadow: none; background-color: green; }
card_param: cards
filter:
  include:
    - entity_id: /^(button|switch)\.velop_mesh_/
      integration: linksys_velop
      options:
        type: custom:button-card
        tap_action:
          action: >-
            [[[ return (entity.entity_id.startsWith("button")) ? "call-service"
            : "toggle" ]]]
          service: >-
            [[[ return (entity.entity_id.startsWith("button")) ? "button.press"
            : undefined ]]]
          service_data:
            entity_id: entity
        name: |-
          [[[
            var friendly_name = entity.attributes.friendly_name.replace("Velop Mesh:", "").trim()
            var idx = friendly_name.lastIndexOf(" ");
            var ret = friendly_name.substring(0, idx) + "<br />" + friendly_name.substring(idx + 1)
            return ret
          ]]]
        styles:
          card:
            - margin-bottom: 3px
          icon:
            - animation: |-
                [[[
                  var ret
                  if (entity.entity_id == "button.velop_mesh_start_speedtest" && states["binary_sensor.velop_mesh_speedtest_status"].state == "on") {
                    ret = "rotating 2s linear infinite"
                  }
                  return ret
                ]]]
            - color: |-
                [[[ 
                  var ret
                  var col_on = "darkcyan"
                  var col_off = "var(--primary-text-color)"
                  ret = (entity.state == "on") ? col_on : col_off
                  if (entity.entity_id == "button.velop_mesh_start_speedtest") {
                    ret = (states["binary_sensor.velop_mesh_speedtest_status"].state == "on") ? col_on : col_off
                  }
                  return ret
                ]]]
          name:
            - font-size: smaller
            - color: |-
                [[[
                  var ret
                  var col_on = "darkcyan"
                  var col_off = "var(--primary-text-color)"
                  ret = (entity.state == "on") ? col_on : col_off
                  if (entity.entity_id == "button.velop_mesh_start_speedtest") {
                    ret = (states["binary_sensor.velop_mesh_speedtest_status"].state == "on") ? col_on : col_off
                  }
                  return ret
                ]]]
sort:
  method: friendly_name

[RomRider]

I see all of you hace stack-in-card as a parent. Could you remove it temporarily and see if that still happens? Might be related to stack-in-card

[uvjim]

It's funny you mention that... I tested earlier today using horizontal-stack instead and haven't had an issue yet. Was going to give it until tomorrow before posting back.

[Spirituss]

I also found that there is no issue inside horizontal-stack. But it does matter inside vertical-stack, custom: vertical-stack-in-card, custom: stack-in-card inside layout-card.

[Spirituss]

@RomRider Guys, any news here?

[sroebert]

I have the same problem when trying to use it with the else card in the auto-entities card. It works fine if I wrap it inside a horizontal stack, it does not work if I wrap it in a vertical stack.