Chrome/Edge中input关联datalist后点击出现双下拉列表的问题求助

我遇到了一个困扰：用下面的代码实现了带datalist的输入框，但是在Chrome和Edge浏览器里，点击输入框的时候会同时弹出两个下拉列表，效果如图所示。可同样的代码在Firefox和Safari里却正常显示，只会出现一个列表。有没有大佬能帮我看看哪里出问题了？

我的代码如下：

HTML 代码 #

<div class="combo-box">
  <input type="text" list="options" id="combo-input"/>
  <datalist id="options" style="display: none;" >
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
  </datalist>
</div>

CSS 代码 #

.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;
}

JavaScript 代码 #

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';
  }
});

备注：内容来源于stack exchange，提问作者Blaine