TypeError: Cannot read property 'replaceChild' when using conditional cards in a vertical stack

skarfacegc commented 4 years ago

Checklist

[x] I have updated to the latest available Home Assistant version.
[x] I have cleared the cache of my browser.
[x] I have tried a different browser to see if it is related to my browser.

The problem

Using conditional cards in a vertical stack sometimes doesn't work. 2 conditional cards in a vertical stack monitoring a 2 state external entity. External state 'toggles' between the two cards. Seems like there's a race condition between the state flip and the right card being writable at the right time. Condensed example config below

Expected behavior

The cards toggle on and off correctly

Steps to reproduce

Create horizontal stacks of button cards (not sure if type matters) inside of two different conditional vertical stacks. Conditions for both stacks are different so only one stack shows at a time (show different sets of buttons based on activity)

Environment

Home Assistant release with the issue: 105.5
Last working Home Assistant release (if known):
UI Type (States or Lovelace): lovelace
Browser and browser version: current chrome OSX
Operating system: Debian vm using venv

Problem-relevant configuration

        - type: vertical-stack
          cards:
            - type: horizontal-stack
              title: Basement TV
              cards:
                - name: "Power Off"
                  type: "custom:button-card"
                  icon: mdi:power
                  entity: remote.basement
                  state: 
                    - value: 'on'
                      color: white
                    - operator: template
                      value: >
                        [[[ return states['remote.basement'].attributes.current_activity === 'PowerOff' ]]]
                      color: grey
                  tap_action:
                    action: call-service
                    service: remote.turn_off
                    service_data:
                      entity_id: remote.basement 
                - name: "Watch TV"
                  type: "custom:button-card"
                  icon: mdi:television  
                  state:
                    - operator: template
                      value: >
                        [[[ return states['remote.basement'].attributes.current_activity === 'TV' ]]]
                      color: var(--paper-slider-active-color)
                  tap_action:
                    action: call-service
                    service: remote.turn_on
                    service_data:
                      entity_id: remote.basement
                      activity: "TV"
                - name: "Play Xbox"
                  type: "custom:button-card"
                  icon: mdi:xbox
                  state:
                    - operator: template
                      value: >
                        [[[ return states['remote.basement'].attributes.current_activity === 'Play Xbox One' ]]]
                      color: var(--paper-slider-active-color)
                  tap_action:
                    action: call-service
                    service: remote.turn_on
                    service_data:
                      entity_id: remote.basement
                      activity: "Play Xbox One"
            - type: conditional
              conditions:
                - entity: sensor.basement_tv_activity
                  state: 'Play Xbox One'
              card:
                type: horizontal-stack
                cards:
                - icon: mdi:arrow-left
                  type: "custom:button-card"
                - icon: mdi:arrow-right
                  type: "custom:button-card" 
                - icon: mdi:circle-medium
                  type: "custom:button-card"
                - icon: mdi:arrow-up
                  type: "custom:button-card"
                - icon: mdi:arrow-down
                  type: "custom:button-card"
            - type: conditional
              conditions: 
                - entity: sensor.basement_tv_activity 
                  state: 'TV'
              card:
                type: horizontal-stack
                cards:
                  - name: "Netflix"
                    type: "custom:button-card"
                    icon: mdi:netflix
                    tap_action:
                      action: call-service
                      service: remote.send_command
                      service_data:
                        entity_id: remote.basement
                        device: Samsung TV
                        command: Netflix
                  - name: "Amazon"
                    type: "custom:button-card"
                    icon: mdi:amazon
                    tap_action:
                      action: call-service
                      service: remote.send_command
                      service_data:
                        entity_id: remote.basement
                        device: Samsung TV
                        command: Amazon
                  - name: "Plex"
                    type: "custom:button-card"
                    icon: mdi:plex
                    tap_action:
                      action: call-service
                      service: remote.send_command
                      service_data:
                        entity_id: remote.basement
                        device: Samsung TV
                        command: 
                          - "SmartHub"
                          - "DirectionRight"
                          - "DirectionRight"
                          - "Select"
                        delay_secs: 0.4

Javascript errors shown in your browser console/inspector

5hui-stack-card.ts:97 Uncaught TypeError: Cannot read property 'replaceChild' of null
    at HTMLElement._rebuildCard (hui-stack-card.ts:97)
    at HTMLElement.t.addEventListener.once (hui-stack-card.ts:85)
    at r (fire_event.ts:76)
    at create-card-element.ts:111

Additional information

skarfacegc commented 4 years ago

Finally got upgraded to 105.5 haven't seen the issue. Closing, will re-open if I see it again.

skarfacegc commented 4 years ago

Issue is showing up again. Added some actions to the button arrow cards, set some sizes and colors. Haven't backed out change to see if it changes things at all. I suspect I was just getting lucky before in whatever race condition I was hitting

skarfacegc commented 4 years ago

Seems to happen less frequently on a freshly loaded browser (Confirming that I did in fact dump the full file cache with ⌘y in chrome)

pergolafabio commented 4 years ago

ok, confirmed i have this too when i am using conditional cards , when the card is invisible, the error is thrown

for now i am using state-switch card, they dont have the issue

allthough, i still prefer confitional card

any update on this case?

pergolafabio commented 4 years ago

guys, is this fixed for you? i still have the same issue on 108.2

skarfacegc commented 4 years ago

I still see the warning periodically, but the conditional cards are working fine now. Not sure they were actually related.

pergolafabio commented 4 years ago

Yeah, for me too, still same errors on conditional cards, when no card is shown

poldim commented 4 years ago

No sure if #5398 (@bramkragten) was supposed to fix this, but as of yesterday, I was still getting these errors on the latest stable build. I replaced the conditional cards with the custom:state-switch and it eliminated the errors.

home-assistant / frontend