button changes color after being clicked, and needs extra click to return to original

[Mariusthvdb]

Checklist

• [X ] I updated the card to the latest version available
• [X ] I cleared the cache of my browser

Describe the bug A clear and concise description of what the bug is.

before click

click to reveal more info,

and click more-info away, makes button go:

you can see the original color in the other buttons, it only pertains to this 1 clicked button

clicking next to the button in an empty spot bring back the correct color. As if something had to be released.

Version of the card Version: 4.dev xxx (but has been like this for some time

To Reproduce This is the configuration I used:

type: custom:button-card
entity: sensor.living_dimmer_switch_battery_level

Screenshots If applicable, add screenshots to help explain your problem.

Expected behavior A clear and concise description of what you expected to happen.

would love the button to immediately return to its original state

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

I do have a card_mod_theme mod on the more info, but cant find a specific setting why that would not return the individual card

  card-mod-more-info-yaml: |

    $: |
      .mdc-dialog {
        backdrop-filter: blur(17px);
        -webkit-backdrop-filter: blur(17px);
      }

so I disabled that, and it makes no difference. even better, this seems to no longer work at all .....

    $: |
      .mdc-dialog {
        backdrop-filter: blur(17px) !important;
        -webkit-backdrop-filter: blur(17px) !important;
      }

does work, I try to avoid !important, but this requires it. Ill leave it out, as its ugly and slow.

also, the effect of the greyed cards is only visible on desktop, and not on the mobile app

[RomRider]

Doesn't it do the same thing on the default button-card from HA ?

[Mariusthvdb]

Yes!

I never use those, so wasnt aware...

I've just installed the bare minimum and set theme to default: it does the exact same thing.

I consider that to be a bug... what would be the formal description of this effect, so I file it in the Frontend repo? Is it some grayscale filter? or transparency?

see: https://github.com/home-assistant/frontend/issues/17410

[RomRider]

I believe it's the ripple effect (it's an object from an external library) not being cleared when the pop-up is opened. It has to be fixed in some way in the action-handler-directive.ts file in the frontend (If they find how to do it, I'll port the fix over to button card 😁)