StevenH001 opened a new issue #1158: URL: https://github.com/apache/cordova-android/issues/1158
# Bug Report HTML datalist element attaches to the first selected input properly, but subsequent focus on a second input causes the datalist item to open still attached to the first selected input, instead of re-positioning to match the new input focus. ## Problem Datalists with lots of data will cover up input elements when not properly attached to either the top or bottom of the correct input and it is confusing seeing it not attached to the input with current focus. ### What is expected to happen? The datalist should open directly below or above the field that has current focus when there are multiple datalists, regardless of when focus was given to that specific input field. https://jsfiddle.net/vrz5bs1h/ ### What does actually happen? The datalist stays attached to the first input that was given focus. ## Information <!-- Include all relevant information that might help understand and reproduce the problem --> You have to make sure the datalist opens on the first input you select, then (while still having focus in the first field) click in the second input field. If you drop focus (click outside either input) it will work as expected and reposition the datalist to the new element. I tried to reproduce this in a native Android app using the system webview, but the datalist wouldn't even display there, not sure what I'm doing wrong in that sense. However, I have tested this in a hello world cordova app and still experienced the issue. I know there was an old bug where the datalist wouldn't display at all. That has since been patched, https://bugs.chromium.org/p/chromium/issues/detail?id=662828. I have made sure my System Webview is up to date, currently version 88.0.4324.93. ### Command or Code You can use the code from the jsFiddle above, as long as it has two inputs/datalists the issue occurs. Otherwise you can just use this: ``` <div> <label for="ice-cream-choices">Choose a flavor:</label> <input list="ice-cream-flavors" id="ice-cream-choices" name="ice-cream-choices"> <datalist id="ice-cream-flavors"> <option value="Chocolate"> </option><option value="Coconut"> </option><option value="Mint"> </option><option value="Strawberry"> </option><option value="Vanilla"> </option></datalist> <label for="ice-cream-choice">1Choose a flavor1:</label> <input list="ice-cream-flavor" id="ice-cream-choice" name="ice-cream-choice"> <datalist id="ice-cream-flavor"> <option value="1Chocolate1"> </option><option value="1Coconut1"> </option><option value="1Mint1"> </option><option value="1Strawberry1"> </option><option value="1Vanilla1"> </option></datalist> </div> ``` ### Environment, Platform, Device <!-- In what environment, on what platform or on which device are you experiencing the issue? --> Android version: 11.0.0 WebView implementation: Chrome 88.0.4324.93 ### Version information Cordova [email protected] Phonegap [email protected] ## Checklist <!-- Please check the boxes by putting an x in the [ ] like so: [x] --> - [x] I searched for existing GitHub issues - [x] I updated all Cordova tooling to most recent version - [x] I included all the necessary information above ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
