绑定datalist的input需3次点击才能选中文本，是否正常如何解决？

交互差异是否属于正常行为 #

这是Chromium、Webkit内核浏览器的默认原生实现，属于正常行为。
绑定datalist的input点击末尾空白区域时，第一次点击会优先触发「唤起datalist下拉选项」的交互逻辑，占用了一次点击判定，因此需要三次点击才能触发全选；普通input没有datalist唤起的前置逻辑，第一次点击定位光标、第二次点击即可全选，二者的交互差异是浏览器原生设计导致的，不属于bug。

可行规避方案 #

• 方案1：手动接管双击全选逻辑
  直接监听input的双击事件，强制选中全部内容，对齐普通input的交互，实现成本最低：

  const datalistInput = document.querySelector('input[list="options"]');
  datalistInput.addEventListener('dblclick', (e) => {
    e.preventDefault();
    e.target.select();
  });
  

• 方案2：禁用点击唤起datalist，仅保留输入时唤起逻辑
  点击时临时移除list属性阻止下拉唤起，异步恢复后不影响后续输入联想功能：

  const datalistInput = document.querySelector('input[list="options"]');
  datalistInput.addEventListener('click', (e) => {
    const listVal = datalistInput.getAttribute('list');
    datalistInput.removeAttribute('list');
    setTimeout(() => datalistInput.setAttribute('list', listVal), 0);
  });
  

• 方案3：自定义下拉组件替代原生datalist
  如果对交互一致性要求很高，可以放弃原生datalist，自行实现下拉联想功能，完全自定义交互逻辑，缺点是开发成本较高。

内容的提问来源于stack exchange，提问作者MathAng