Datalist показывает два визуальных представления списка опций раскрытия ⇐ Html

[Anonymous]

С этим данных DataList, сгенерированным кодом ниже, в Chrome/Edge я нажимаю на окно ввода, и два раскрывающихся списка отображаются одновременно, как это. Что я делаю не так? Он показывает только один список как в Firefox, так и в Safari
https://jsfiddle.net/f0qw9lmn/3/образной />

Код: Выделить всё

const comboInput = document.getElementById('combo-input');
const datalist = document.getElementById('options');
comboInput.addEventListener('mousedown', function(e) {
if (datalist.style['display'] == 'block') {
datalist.style['display'] = 'none';
} else {
datalist.style['display'] = 'block';
}
});< /code>
.combo-box {
position: relative;
display: inline-block;
}

/* always show arrow, not just on hover */
input::-webkit-calendar-picker-indicator {
opacity: 100;
display: inline-block;
}

#options {
position: absolute;
top: 100%;
left: 0;
width: 100%;
border: 1px solid #ccc;
border-top: none;
display: none;
background-color: #fff;
z-index: 1;
}

#options option:hover {
background-color: #eee;
}< /code>



Option 1
Option 2
Option 3

Подробнее здесь: https://stackoverflow.com/questions/794 ... ption-list