Ha-button-menu dropdown stops working

Configuration Frontend
1

Hi all:

I’m using charge card and noticed that all dropdown defined as ha-button-menu stops working. All list items in the dropdown are displayed as a list, and clicking the icon cannot hide the list.
The code uses mwc-list-item and mwc-list, anybody aware of any change in 2026.02 that could cause the issue? Many thanks!

        const sources = carddata.dropdownitems != null ? carddata.dropdownitems : this.currentlimits;
        const selected = sources.indexOf(Number(carddata.useval));

        return html`
          <div class="collapsible-item">
          <ha-button-menu @click="${(e) => e.stopPropagation()}">
            <div slot="trigger">
                <div class="tooltip">
                  <ha-icon icon="${carddata.icon}"></ha-icon>
                  <br />${carddata.useval} ${carddata.unit_show ? carddata.unit : ''}
                  <span class="tooltiptext">${this.loc(carddata.text, "common", this.brand)} ${carddata.unit_showontext ? "(" +carddata.unit +")" : ''}</span>
                </div>
            </div>
              <mwc-list>
              ${sources.map(
                (item, index) =>
                  html`<mwc-list-item
                    ?activated=${selected === index}
                    value=${item}
                    @click=${(event) => this.createServiceData(carddata.service, true, carddata.service_data, event)}
                  >
                    ${item}
                  </mwc-list-item>`
              )}
              </mwc-list>
            </ha-button-menu>
          </div>
        `;```
2

You need to use <ha-dropdown> instead, see an examplw here. I believe HA front-end is slowly migrating from Material components to another library. I expect more front-end breaking changes like this with each new release.

2 Likes
3

Ok thanks! I have read release notes of 2026.02 but couldn’t find any mentioning so just want to check if something has been changed in 2026.02. It worked fine before.

4

I don’t think they announce this kind of internal changes.

I believe we should not be using custom components defined by the HA front-end in our cards / panels. These are not documented anywhere and are bound to change at devs whim.

5

So far this has been less of a hassle than using card-mod, etc. It helps if you have 1 definition for a thing (e.g. dropdown) and just reference it in different places.

6

Thanks, I have updated the code to use ha-dropdown and it works now.

1 Like
7

As Simple Vacuum Card (xiaomi-vacuum-card: GitHub - benct/lovelace-xiaomi-vacuum-card: Simple card for various robot vacuums in Home Assistant's Lovelace UI · GitHub) no longer maintained.

Check out my version of: Xiaomi Vacuum Card at: GitHub - 3ative/lovelace-xiaomi-vacuum-card · GitHub

1 Like