home-assistant
Custom cards sometimes not being displayed in Edit mode
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-cardin its place, but set it todisplay:noneso 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:nonefrom thehui-error-cardto show the error. - If the card does load before the timeout expires, fire an
ll-rebuildevent 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
Related:
https://github.com/kalkih/mini-graph-card/issues/984 https://github.com/aukedejong/lovelace-windrose-card/issues/39 https://github.com/rejuvenate/lovelace-horizon-card/issues/57
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.
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.
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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
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.
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.
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.
not sure if this will help , but Only occasionally I'll get this error and it seems to affect mini-graph-card (and a few others, but not others). 98% of the time all the cards load fine (including mini-graph-card). This is consistent across several different browsers around my house. (ie android tablets, ipad's with safari, and my windows11 desktop with firefox). Generally when it happens on one it starts happening on all and is not related to clearing the cache or using incognito mode).
I noticed this when trying to id the issue. (you can see the actual mini-graph.js is found / 200, but the one with hacstag= shows as error /corrupt - i assume this tag is try to force bypass browser cache maybe?)
hope this helps (you can see in 2nd photo, others are effected also - but as i said, 98% of the time all cards load fine);
I am observing the same behavior in 2024.8 with decluttering-template. Sometimes the card isn't instantiated in the DOM then after reloading it's fine.
I have this same error. One time I fixed it by changing thenformatting of nummers in my user profile, found that on reddit. But after half an hour the error came back
I should perhaps add that I fixed my issue by changing how certain custom cards set their visibility to use new lovelace properties.
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.