Microsoft Edge中程序化触发<input="file">无法打开文件选择对话框的问题咨询

大家好，我最近在开发时遇到了一个只在Microsoft Edge上出现的奇怪问题，想请教下有没有同行遇到过类似情况，或者知道背后的原因和解决办法？

问题概述 #

我在React 18 + Next.js项目中实现了一个文件上传组件，通过按钮点击来触发隐藏的<input type="file">打开文件选择对话框。这套逻辑在Safari、Chrome、Firefox里都能正常工作，但在最新版的Microsoft Edge（macOS系统）里完全失效，文件选择对话框始终弹不出来。不过Edge里的拖拽上传功能是正常的。

环境信息 #

• 浏览器：最新版Microsoft Edge
• 操作系统：macOS
• 框架：React 18 + Next.js
• 运行上下文：安全上下文（HTTPS/localhost）

正常工作的场景 #

• Edge中的拖拽文件选择功能完全正常
• Safari及其他浏览器中，按钮点击触发文件选择的逻辑运行无误
• 所有程序化调用的API都返回"成功"状态，没有抛出任何错误

异常的场景 #

• 在Edge中，任何形式的程序化触发文件输入框的操作都无法打开选择对话框
• 虽然API调用看起来执行成功，但文件选择对话框始终不出现

代码示例 #

const FileUploadComponent = () => {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    const fileInput = fileInputRef.current;
    if (!fileInput) return;

    // 以下方法在Edge里都看似"成功"但没有对话框弹出：
    // 方法1：直接调用click
    fileInput.click(); // 返回undefined，无错误
    // 方法2：使用showPicker API
    if ('showPicker' in fileInput) {
      fileInput.showPicker(); // 无错误抛出，看似执行成功
    }
    // 方法3：先聚焦再点击
    fileInput.focus(); // 元素成功获得焦点
    fileInput.click(); // 无错误，无对话框
  };

  return (
    <div>
      <button onClick={handleClick}>Select File</button>
      <input
        ref={fileInputRef}
        type="file"
        style={{ display: 'none' }}
        onChange={(e) => console.log('File selected:', e.target.files)}
      />
    </div>
  );
};

调试信息 #

在Edge中点击按钮时，控制台输出的调试日志如下：

• ✅ 找到文件输入元素
• ✅ showPicker()调用成功
• ✅ 元素成功获得焦点
• ✅ click()调用成功
• ✅ userActivation: true（初始状态）
• ❌ 无文件对话框弹出
• ❌ onChange事件从未触发

尝试过的解决方法（均无效） #

• 直接调用fileInput.click()
• 使用现代API fileInput.showPicker()
• 先聚焦再点击：fileInput.focus(); fileInput.click();
• 手动分发鼠标事件：fileInput.dispatchEvent(new MouseEvent('click'))
• 使用label关联：<label><input type="file"></label>
• 点击时临时显示文件输入元素
• 把文件输入元素定位在按钮上方做不可见覆盖层，让用户直接点击
• 调整事件触发时机：立即执行 vs setTimeout延迟执行

关键观察 #

• 用户激活状态保留：点击处理函数是同步从用户事件中调用的
• 无JavaScript错误：所有API调用都完成且未抛出错误
• 元素状态正确：文件输入元素已连接到DOM，未禁用，成功获得焦点
• 安全上下文有效：window.isSecureContext === true
• 其他浏览器正常：完全相同的代码在Safari、Chrome、Firefox里都能正常工作

我的疑问 #

1. Microsoft Edge到底在阻止什么，导致即使使用现代的showPicker() API且保留了用户激活状态，也无法打开文件选择对话框？
2. 有没有特定的Edge安全策略、CSP头或者浏览器设置会干扰文件输入功能？
3. 针对这个问题，有没有Edge专属的解决办法？

内容来源于stack exchange