Input datalist no longer working on Cordova Android

1

Users of my Android app have reported this issue.

Tap an (BS4) input down arrow and the datalist is displayed, tap an option from the datalist > the datalist closes but does not enter that datalist item into the input.

Works ok on iOS.
Works in the local browser.
No error messages.

This used to work on Android but no longer does.

I think this might caused by a new version of Android Webkit/Android OS, has anyone else had this issue and if so how did you resolve it?

2

  1. Is this when running as a web app or a native app?

  2. Do you see the same thing with the InputmodeDatalist sample? (I need to reproduce this here - it would be good if we were testing the same thing)

3

Hi,

The issue only seems to be with a native Android app (so far). I have checked in the local browser and on iOS (native) and they seem ok.

I have also tested it with BlueStacks 5 (will run android apps on windows) which was also ok (Android 11 I think).

The app has been live for quite some time now approx. 12 months, then I started getting reports of it now not working.

I have tested on Android 12 tablets and can reproduce the issue but sometimes it might randomly work but most of the time it won’t. I have a form with multiple inputs using datalists.

As far as I can tell it is ok on Android 11 but not Android 12 or higher.

4

I have reproduced the issue on a sample app and have sent you the project files.

I have tested on Android 12 (native) built with VoltBuilder.

5

The conclusion seems to bet that it is an Android 12 bug. It’s seems possible to fix by going through all the forms and wrapping the inputs inside another Container.

Hopefully Google will fix it soon!

6

Found this online: 1177831 - chromium - An open-source project to help move the web forward. - Monorail If you are having the same issue please report the bug in the link above ↑

There is an additional bug related to this scenario. When a webview contains 2 or more datalists, the first one you interact with behaves as expected, but all others become broken - selecting a value from the dropdown does not update the input.

Tested on Android 11. This issue is not related to Cordova. To replicate, use any app with an in-app browser (e.g. Facebook Messenger, Slack, etc) to visit this URL:
https://www.ekoopmans.com/datalist-bug/

7

It’s seems possible to fix by going through all the forms and wrapping the inputs inside another Container. Remember to change the HTML tag of the container from DIV to Form

8

I have used this for each input with a datalist as a temporary fix.

var fm = document.createElement("form");
myElement.parentNode.insertBefore(fm, myElement);
fm.appendChild(myElement);