#search-input-outlined controls disappear on page refresh

1 messages · Page 1 of 1 (latest)

sharp trail
#

I am using the HA <search-input-outlined> control for filtering media list displays in my custom spotifyplus_card(https://github.com/thlucas1/spotifyplus_card) dashboard. It works (and looks) great, as long as I don't refresh the page (e.g. using F5). The control completely disappears after the refresh; the only way to get it to re-appear is to edit the resource entry via [manage resources(http://homeassistant.local:8123/config/lovelace/resources)], and update a version number on the javascript.js file (e.g. /local/spotifyplus_card.js?v1). It happens to both Masonry and Panel views as well.

After the refresh, Chrome designer tools shows that the following HTML is rendered for the control: <search-input-outlined id="filterCriteria" class="media-browser-control-filter" .autofocus="true" placeholder="filter by album name"></search-input-outlined>, with no child elements / shadowRoot.

Has anyone else experienced this behavior with the <search-input-outlined> control? Also having the same issue with the <ha-md-button-menu> control (which was renamed unexpectedly with the 2024.10 release, btw).

I would think it would be available anywhere, as it uses the HTMLElementTagNameMap interface.

declare global {
  interface HTMLElementTagNameMap {
    "search-input-outlined": SearchInputOutlined;
  }
}

Note that I also use other HA-defined controls without issues: <ha-alert>, <ha-control-button>, <ha-icon-button>, etc.

Thanks in advance for any assistance you can give.

form-before-refresh.png form-after-refresh.png
hoary thicket
#

I think what's happening is you have to visit a HA page that naturally loads that component.

#

e.g. the layout/resources page is one of the pages with the data-table that includes <search-input-outlined>

#

so I'm guessing just simply visiting layout/resources is what is fixing your card, not the changing of the version

hoary thicket