Title: Prevent input datalist from automatically opening upon receiving initial keyboard focus
Tags: html;internet-explorer;input;html-datalist
Question: I have an HTML5 drop-down control, configured similar to this:
<input id="textCtrl" list="browsers"&gt;
<datalist id="browsers"&gt;
<option value="Internet Explorer"&gt;
<option value="Firefox"&gt;
<option value="Chrome"&gt;
<option value="Opera"&gt;
<option value="Safari"&gt;
</datalist&gt;
I also give this control focus upon the page-load event:
//It's done via JQuery, but it makes no difference for this question
$(function () {
//Set focus to the text control
$('#textCtrl').focus();
So what happens, is that when the page loads in IE, or whatever it's called in Windows 10, the drop-down list is opened automatically upon page load, which looks kinda weird. So I would like to keep it initially closed:
Here, you can try it for yourself.
So, is there any way to avoid this list from opening upon page load while the text input has initial keyboard focus?


Here is another answer: Not an ideal answer, but the following works for me:
// Temporarily remove the list from the input and set focus
$("#textCtrl").removeAttr("list").focus();
// Restore the list to the input - if this is done immediately
// the datalist is shown on focus so use a timer to delay adding
// the list.
setTimeout(function() {
$("#textCtrl").attr("list","browser");

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:10/17/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><internet-explorer><input><html-datalist>', 'Title': 'Prevent input datalist from automatically opening upon receiving initial keyboard focus', 'ViewCount': 1366, 'id': 33183775, 'user_AboutMe': '<p>You can contact me at webdc2000 [ a t ] hotmail.com</p>\n', 'user_AccountId': 449124.0, 'user_DisplayName': 'c00000fd', 'user_Reputation': 19754.0, 'user_Views': 5668.0, 'user_id': 843732.0}}