Dropdown list is displayed right away on some Android phones running Android 11 or lower

[boggye]

Hi,

In the dropdown example there are 2 methods to handle the dropdown, 1 by clicking/tapping the botton to open/close the drop down list and 2 by clicking/tapping the button to open the list and clicking/tapping outside the list to close it.

In my app I implemented method 2. Some of the users that use Android phones, for instance Samsung S9, A20 have the following issue: when they navigate to the page the dropdown lists are displayed right away and nothing works to close them. In other words, if you click/tap outside the dropdown lists, it doesn't work. I tested with an user even the daisy ui home page and the list of languages shows up right away.

Any ideas on what can cause this, and how to fix it? I scanned through the issues and I found this one: #824 but it seems to apply to IOS.

Thank you!

[boggye]

ok, after more debugging I discovered that the issue was present in Chrome 87 and it was fixed in Chrome 88. Here is what the DaisyUI page looks like in Chrome 87. As you can see, the dropdowns are expanded.

My question is, is there a way to make it work in Chrome 87 as well maybe by applying some shim?

[saadeghi]

Why are you using Chrome 87? The latest version of Chrome is 128!
Older versions of Chrome are supported by neither the Chromium project, nor Google, nor the Chrome team.
Update your browser.

[boggye]

It's because the older models of the Android phones come with older chrome versions. Yes, we are looking at upgrading the browser, but I was curious to see if there is a way to fix it for 87 as well through JS or CSS shims. Anyway, it might not be worth the time, and like you recommended, the proper solution is to upgrade the browser. Things are not that simple because these cell phones use a VMWare browser for vpn tunnelling and this browser depends on the Chrome components. My colleague upgraded to the latest version of Chrome and it broke the VMWare browser. That's the context. There are a few thousand users affected by this, and I was thinking of applying a temporary solution to provide immediate relief for the users until their cell phones are upgraded. There is no debate, upgrading Chrome to a more recent version is the proper solution.

[saadeghi]

I see. If it's not possible to upgrade the browser, maybe an older version of daisyUI would work, or maybe you can use the datails/summary method of dropdown which uses HTML elements instead of CSS :focus event.

daisyUI (like Tailwind CSS) is constantly adapting newer HTML/CSS features.
Older versions of daisyUI are still available of course but we don't have any plans to provide backward compatibility for the latest version of daisyUI because if we do, there's no way for us to use all the new CSS/HTML features and that would eventually lead to daisyUI becoming a legacy library, only for older browsers.