iantrich / config-template-card

📝 Templatable Lovelace Configurations
MIT License
441 stars 56 forks source link

Full card reload when entity state changes #144

Open ron-osu opened 1 month ago

ron-osu commented 1 month ago

Checklist:

Release with the issue: 1.3.6 / Home Assistant 2024.7.4

Last working release (if known):

Browser and Operating System: Windows 10 with Firefox and also Nest Hub Max

Description of problem: This may be a duplicate of 78 which is closed but only resolved when using the picture elements card, from what I read.

I am using config-template-card with paper-buttons-row to create a horizontal "tab strip" control with about 15 buttons that ends up being wider than the screen (Nest Hub Max) so I am using 'overflow:x scroll' style/CSS with paper-buttons-row to enable horizontal scrolling, which works well.

Choosing a button on the tab strip updates the only entity that is defined in the config-template-card (as intended), but it causes the entire tab strip (row of buttons) to reload and effectively scrolls the tab strip all the way to the left. So, if you had to scroll all the way to the right to press a button on the tab strip, the reload of config-template-card scrolls all the way to the left due to the entity update and effectively hides the button that was just pressed.

The behavior is the same with Firefox and Nest Hub Max.

Javascript errors shown in the web inspector (if applicable): N/A

Additional information:

I tried using the templating built into paper-buttons-row to accomplish this (without config-template-card) but unfortunately it does not allow templates within actions. I left a note for that developer here and here.

I also tried embedding config-template-card within the individual buttons of paper-buttons-row, similar to your examples of the Picture Elements Card and Entities card but that did not work either. It may not be designed to work with anything but those two card types, or perhaps I just couldn't get the YAML right.

Lastly, I also confirmed that when I change the entity defined for the config-template-card to another random entity (that rarely changes state), the reload issue does not occur. Unfortunately, I don't think that this workaround will work for my use case, but I'll do some additional testing. Regardless, I would expect this reload issue affects most other card types. And by the way, I can also trigger the reload (and scroll reset) by updating that random entity's value.

@iantrich - I really appreciate all your hard (and unpaid) work here! I am new to Home Assistant and have been super impressed with the ecosystem and contributors like yourself!