Lovelace input select dropdown isues in Chrome Browser and Android App

I’ve already tried everything.
Also ctrl F5.
That’s really weird.
This is also shown in the HA app.
I don’t know what to try anymore.
The funny thing is when I select the field I can use the arrow key on the keyboard to select the values.

I found out the error does not appear in Firefox, only in Chrome and in the Android app.

Hi everyone,

I’ve already tried everything the error remains.
And only in the Chrome browser and in the Android app.
I have not adjusted anything.
Meanwhile I have the current version of HA and the error is still there.

Do you have any suggestions for me?

Thank you.

Hi everyone,
I really don’t know what to try anymore.
I would be very grateful if someone would help me.

I also experience the same thing in the past 1 week. After searching through google, I found out that a flag in my Chrome are the one that give me this trouble.

This is what I did to resolve this problem:

  1. Open New Tab in Chrome
  2. Type: chrome://flags/
  3. Press enter
  4. Search on the top of the page: Experimental Web Platform features
  5. Change from Enabled to Disabled
  6. When chrome ask to relaunch, click relaunch

Hope this can solve your or other people issue in the future

2 Likes

I am seeing this issue on iPad. See my post here:

it shows up in firefox, chrome, safari, and in the home assistant app.

Thank you, this is really helps :slight_smile:

I’m seeing this in the android app. About 2 mo ths ago it started to break and woth the update last night, I now can’t use drop downs at all in the android app.

1 Like

Yes, have the same problem on iOS with iPhone, using the HA app out Chrome.

I can confirm have the same issue on Android using the HA app.

1 Like

Me too. Latest Android app.

Has anyone considered to post a reproducible minimal code with the problem?

It’s already been done (above) so I didn’t think to post another one. Happy to do so though, will update later today.

In 2020?
UI screenshots of smth instead of code?

ok, I’ve done some more testing because I’ve discovered that one of my entities dropdowns was working fine, and the other having problems in the Android App and on Firefox PC.

So, in my case at least it appears the the issue is with the custom:stack-in-card I’m using to put a border around my card.

Faulty code:

type: custom:stack-in-card
mode: vertical
card_mod:
  style: |
    ha-card {
    background-color: blue
    }
cards:
  - type: entities
    entities:
      - entity: select.living_activities
        card_mod:
          style:
            hui-generic-entity-row $: |
              state-badge {
                display: none;
              }
              .info {
                margin-left:0 !important;
              }

working code:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: select.living_activities
        card_mod:
          style:
            hui-generic-entity-row $: |
              state-badge {
                display: none;
              }
              .info {
                margin-left:0 !important;
              }

Unfortunately for my use-case I’m using stack-in-card in lots of places, because it lets me put a border around related entities for a media dashboard.

This is a culprit.
Check this issue.
Also, you may try my card-mod fix proposed in that link.

Just a suggestion: when describing an issue - try to minimize it as much as possible, could be just:

type: custom:stack-in-card
mode: vertical
cards:
  - type: entities
    entities:
      - entity: select.living_activities

without anything else.

1 Like

Thanls @Ildar_Gabdullin
I thought of removing text but then wasn’t sure if some of that text might be part of the problem.

And thank you for those links, not sure why I couldn’t find those when searching about my problem!

This is a simple debugging: start with a small code; test; increase complexity; test; …

Ok, looks like your second fix works for me (I tried it first, have not tried the workaround).

For my use-case all that was required was this:

card_mod:
  style: |
    ha-card {
      overflow: visible !important;
    }

This works for history-graph & input_select, but does not work for a divider between cards (“section” added as hui-element).