Toggle switch for entity holds focus until clicked away

[mwasowski]

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.

The problem

I noticed recently that when I click an entity in card group (or single entity for that matter), the element keeps focus until anything else is clicked making it loose focus as seen on the example:

Expected behavior

When the toggle is clicked the entity looses focus.

Steps to reproduce

1. Add entity card with any type of a switch/input boolean
2. Change it's state.

Environment

• Home Assistant release with the issue: HA 0.109.6, HassOS 3.13, Supervisor 222
• Last working Home Assistant release (if known): -
• Browser and browser version: Firefox 76.0.1 x64
• Operating system: Windows 10 x64 Build 1909

State of relevant entities

It's not relevant to specific entity but I noticed it after I added this.

entities:
  - entity: sensor.bridge_state
  - entity: input_boolean.zigbee_permit_join
  - entity: timer.zigbee_permit_join
show_header_toggle: false
title: Zigbee
type: entities

Problem-relevant configuration

Javascript errors shown in your browser console/inspector

Additional information

[bramkragten]

This is just how websites work, if you click something it gets focus.

[mwasowski]

I have to disagree or maybe I'll rephrase. The 'loosing focus' is referring to the visual aspect. The animation looks like it's stuck half way through with the round shadow around the control.

[mwasowski]

@bramkragten Why this was closed without even taking into consideration or allowing me to explain. This is a bug, maybe visual one but it is.

[bramkragten]

We just use and follow material elements/guidelines. We are not going to make changes to the behaviour of those elements.

You can create an issue upstream if you disagree.

[mwasowski]

Ok, this indeed might be a correct implementation according to Material Design Guidelines. This is just beyond me, I did not think that it might be the case: That's from: https://material-components.github.io/material-components-web-catalog/#/component/switch it behaves the same way HA toggle does.

So you were right, I think I just never realized this and never encountered this, maybe because I have more experience with Material Design in Angular and there it behaves as I was expecting, the ripple effect disappears after the action finishes: That's from: https://material.angular.io/components/slide-toggle/overview

Sorry for opening another issue, but I was genuinely triggered. I cooled down a bit ;)