Custom cards sometimes not being displayed in Edit mode

karwosts commented 11 months 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.

Describe the issue you are experiencing

I was investigating some issues with custom cards and I feel like there may be something broken in the view construction phase for custom cards when the frontend in Edit mode. I suspect this is a frontend bug (and not an issue with the custom cards themselves) but I haven't exactly isolated what it is yet.

As I understand, the loading process for custom cards is:

On first pass, if the card isn't loaded, create a hui-error-card in its place, but set it to display:none so that it is hidden.
Create a timeout to give the custom card content time to load.
If the timeout elapses before the card loads, remove display:none from the hui-error-card to show the error.
If the card does load before the timeout expires, fire an ll-rebuild event to replace the error card with the custom card.

https://github.com/home-assistant/frontend/blob/bffdfcf61c4833293e9782aef4bdcc7c7921152a/src/panels/lovelace/create-element/create-element-base.ts#L127-L130

When this event is fired, it first goes to the element to try to rebuild, but in edit mode we skip this and try to send ll-rebuild all the way up to the hui-root:

https://github.com/home-assistant/frontend/blob/bffdfcf61c4833293e9782aef4bdcc7c7921152a/src/panels/lovelace/views/hui-view.ts#L75-L81

What seems to be broken here in some cases is that when this ll-rebuild event is fired, in some cases the hui-error-card does not have a parent element. For whatever reason it does not seem to be correctly linked in the DOM. Therefore the ll-rebuild event never triggers any action in hui-root and is lost.

https://github.com/home-assistant/frontend/blob/bffdfcf61c4833293e9782aef4bdcc7c7921152a/src/panels/lovelace/hui-root.ts#L545

The view is not rebuilt, and the display:none is not removed from the error card, so we're just left with a hole in the dashboard with a floating card-options bar:

This seems to work for some custom cards and not others for some reason, and it seems sensitive to the card's position on the page, and what other cards exist on the page.

I debugged for a while but I could not isolate why sometimes the hui-error-card correctly had a hui-card-options as its parentElement, and why sometimes the hui-error-card had a parentElement of null.

Describe the behavior you expected

Custom cards will be rendered.

Steps to reproduce the issue

Create a view as described in "Problem-relevant frontend configuration"
Edit the view so you are in edit mode.
Press F5 to reload the page. The custom card will not be rebuilt in edit mode.

What version of Home Assistant Core has the issue?

2023.7

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

chrome, firefox

Which operating system are you using to run this browser?

No response

State of relevant entities

No response

Problem-relevant frontend configuration

cards:
      - type: vertical-stack
        cards:
          - type: markdown
            content: xxx
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.xiaomi_cg_1_co2

Javascript errors shown in your browser console/inspector

none

Additional information

ildar170975 commented 11 months ago

Same with these custom cards:

button-card
tabbed-card
stack-in-card

karwosts commented 11 months ago

I suspect the vertical-stack/markdown card is probably not significant. It is probably just a timing sensitive issue that is perturbed by other cards.

If I just have the mini-graph-card alone on the page, and spam refresh button, about 50% of the time it is not loading, and 50% of the time it does. Probably some kind of race condition.

ildar170975 commented 11 months ago

You are probably right, it may not depend on my conditions only. I came to "vertical-stack/markdown" (same is with "vertical-stack/history-graph") after testing, noticed that in this case I have 100% failures; after placing a card (markdown or history-graph) out of vertical-stack I usually saw it working... Could be a matter of errata.

github-actions[bot] commented 8 months ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

karwosts commented 8 months ago

still valid

github-actions[bot] commented 5 months ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

ildar170975 commented 5 months ago

up

catdad commented 3 months ago

I am currently developing a card that, for me, always has this issue if I include it as the top-level card (i.e. not nested inside a stack). When the card is "not displayed", I can look at the devtools and see that it has an embedded error card with display: none set on it. When I show the error card, it says "Custom element doesn't exist: combined-card" (the name of my card). I see that my card did load successfully on the page (and works correctly outside of edit mode). Best guess is that it is a race condition where the page is rendered before all custom components are loaded -- not sure how the regular view handles it, as this error does not appear to happen outside of loading a page in edit mode.

github-actions[bot] commented 4 days ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

ildar170975 commented 4 days ago

up

home-assistant / frontend