Allow user selection of text in Lovelace

[iantrich]

Closes #2110

[balloob]

The reason we have this is because on mobile, tapping text will (would?) select it.

[iantrich]

@balloob tap and hold selects text. Tapping is not causing any text to be selected, on iOS at least

[balloob]

I can still reproduce this on Chrome on Android. Go to the third demo at https://deploy-preview-3605--home-assistant-demo.netlify.com/ (demo based off this PR), tap on the entrance camera label

Firefox on Android is fine.

[iantrich]

Silk on Fire tablets is fine as well...well that's annoying, Chrome

[balloob]

It's like Chrome wants us to search the web, as if they have some way of making money with that.

[iantrich]

@balloob if you turn off "Tap to Search" in Android Chrome, it stops this behavior.

There are a few other options to pursue it looks like: https://developers.google.com/web/updates/2015/10/tap-to-search

[balloob]

Well we can't expect users to make changes to their browser settings. We actually do use the solution 3 to make it non selectable.

[iantrich]

I wasn't trying to imply that users should, I was just highlighting why it is happening. Solution 3 is too broad and has this negative effect. We'll see how others can be applied.

[balloob]

We could check if it's Chrome on Android and only apply it then?

https://developer.chrome.com/multidevice/user-agent#chrome_for_android_user_agent

[iantrich]

It is only Androir Chrome, for now at least.

[iantrich]

@balloob so in hui-root, in firstUpdated check the user agent and if it matches Android Chrome, apply the no-select styles to :host? I'm not quite sure how to apply a classmap to :host, however...?

[balloob]

Yeah, that could work. You can do this.classList.toggle("disable-text-select", true)

[iantrich]

@balloob so I have it working to toggle the class for Android Chrome, but the user-select options are apparently not being applied. Not sure what I'm missing