Edge工作配置文件中Datalist关闭后无法重新显示的问题求助

问题概述 #

在Microsoft Edge工作配置文件（版本130.0.2849.56）环境下，关联了<datalist>的文本输入框会额外显示一个关闭列表的“X”按钮。用户点击该按钮关闭列表后，无法再次唤出datalist，刷新页面、隐私模式、清除站点存储等操作均无法解决此问题。该异常仅出现在Edge工作配置文件中，Chrome及Edge个人配置文件无此“X”按钮，也不存在该问题。

相关HTML代码：
输入框部分：

<div class="form-floating">
   <input type="text" class="form-control" id="CompanySelect" list="companyDataList" />                                            
   <label for="CompanySelect" data-translate-text="Supplier"></label>
</div>

对应的datalist：

<datalist id="companyDataList">
<option value="FO-000001 - Company Name 1">Company Name 1</option>
<option value="FO-000002 - Company Name 2">Company Name 2</option>
<option value="FO-000003 - Company Name 3">Company Name 3</option>
</datalist>

解决方法 #

1. 重置Edge工作配置文件的浏览器设置 #

重置操作会将浏览器偏好恢复默认，不会删除书签、密码等个人数据：

• 打开Edge，点击右上角三个点 → 「设置」
• 左侧菜单选择「重置设置」，点击「将设置恢复为默认值」
• 重启浏览器后测试datalist是否正常唤出

2. 排查工作配置文件的扩展或企业策略 #

工作配置文件通常带有企业强制安装的扩展或策略，可能干扰datalist行为：

• 禁用扩展：输入edge://extensions/进入扩展管理页面，逐个禁用扩展，每禁用一个就刷新页面测试问题是否消失
• 检查企业策略：输入edge://policy/查看是否存在影响表单、自动完成或datalist的策略，若有联系IT部门确认是否可调整

3. 重新创建Edge工作配置文件 #

若配置文件本身损坏，重新创建可解决局部异常：

• 点击Edge右上角头像 → 「管理配置文件」
• 点击「添加配置文件」，选择「工作或学校」类型，完成登录后打开页面测试

4. 前端临时修复方案（紧急场景） #

如果暂时无法调整浏览器配置，可通过代码避免问题：

方案A：隐藏“X”按钮，防止误触

添加CSS样式隐藏输入框的关闭按钮：

/* 针对Edge工作配置文件的输入框关闭按钮隐藏 */
input::-webkit-search-cancel-button {
  display: none !important;
}

方案B：强制重新绑定datalist

通过JavaScript在输入框获取焦点时重新绑定datalist，强制触发显示：

const companyInput = document.getElementById('CompanySelect');

companyInput.addEventListener('focus', () => {
  // 先移除list属性再重新添加，强制触发datalist渲染
  companyInput.removeAttribute('list');
  setTimeout(() => {
    companyInput.setAttribute('list', 'companyDataList');
  }, 10);
});

更新说明 #

2025-01-21：相同设备、浏览器版本及源码下，部分电脑自行恢复正常，说明问题大概率与工作配置文件的局部异常相关，优先排查配置层面的问题。

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