HTMLInputElement#showPicker()でinput要素のメニューを表示する

showPicker()でinput要素のDatePickerやSelect要素のドロップダウンメニューを表示するで紹介したHTMLInputElement#showPicker()でdatalist要素のドロップダウンメニューも表示できるようになった。

執筆時点ではFirefox 149（beta）でサポートされていたので、もう少しで全主要ブラウザで利用可能になる。

<input id="datalist" list="datalist-options" />
<datalist id="datalist-options">
  <option value="op1">Option 1</option>
  <option value="op2">Option 2</option>
  <option value="op3">Option 3</option>
</datalist>

<button type="button" id="button">Show DatalistPicker</button>

const btn = document.getElementById('button');
const datalist = document.getElementById('datalist');

btn.addEventListener('click', () => {
  try {
    datalist.showPicker();
  } catch(e) {
    console.error(e);
  }
});

デモ