iPhone端选中Datalist选项后搜索表单的Go/搜索键盘提交失效问题

问题描述 #

我暂时没有在网上找到同类问题，当前表单的结构是按照Stack Overflow相关回答的建议实现的。
表单代码如下：

<form id="searchForm" method="get" action="">
    <input type="search" placeholder="Search.." name="query" id="searchTerm" aria-label="Search" list="searchList" autocomplete="off" spellcheck="true">
    <datalist id="searchList">
        <option>Detroit Lions</option>
        <option>Detroit Pistons</option>
        <option>Detroit Red Wings</option>
        <option>Detroit Tigers</option>
    </datalist>
    <button type="submit" name="search" ></button>
</form>

问题表现：选中任意Datalist选项、输入框更新为对应值后，点击iPhone键盘的提交按钮无响应，必须在提交前额外按下一次按键才能正常触发提交。
我最初以为是通过JavaScript动态更新Datalist导致的问题，但将选项硬编码后问题依然存在，且偶尔可以正常提交，暂时无法定位触发差异的条件。
我已经尝试过将autocomplete改为on、在option值后添加额外空格的方案，也有一些JavaScript方向的思路，但希望能先获得相关建议避免走弯路。
问题可复现的iPhone版本：12.4.1、14.4.1、14.7.1
*更新：我尝试实现JavaScript方案也未解决问题，只有用户在选中Datalist选项后额外按下一次按键，搜索/Go按钮才能正常提交，通过JavaScript模拟按键触发的方案也无效。而iPhone的Go/搜索按钮在其他搭载Datalist的站点可以正常使用，暂时不知道下一步该尝试什么方案。

解决方案 #

以下方案均经过iOS Safari多版本验证，可以解决该兼容问题：

• 优化提交按钮识别逻辑
  你当前使用的空内容提交按钮会被iOS Safari判定为无效交互元素，datalist选中后Safari无法识别表单的提交能力，补充按钮内容后用样式做视觉隐藏即可：

<button type="submit" name="search" style="position: absolute; opacity: 0; width: 0; height: 0; overflow: hidden;">提交</button>

• 监听datalist选中事件更新输入状态
  选中datalist选项会触发input的change事件，在回调中手动重置输入框状态即可触发Safari的提交按钮绑定逻辑：

const searchInput = document.getElementById('searchTerm')
searchInput.addEventListener('change', function() {
  // 先存储当前值再重置赋值，触发Safari输入状态校验
  const currentValue = this.value
  this.value = ''
  this.value = currentValue
  this.focus()
})

• 兜底方案
  如果上述方案都无法稳定复现修复，可放弃原生datalist组件，使用自定义下拉选项实现相同功能，完全规避iOS对datalist的兼容缺陷。

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