React项目中Safari浏览器文件选择器首次点击无响应问题

问题场景 #

现有React项目中，通过动态创建input[type="file"]唤起文件选择器的代码，在多数浏览器中正常工作，但在Safari 16.5.1及16.6版本中，首次点击触发按钮常无响应，无法唤起选择器。按钮仅在selectFile函数存在时渲染，原实现代码如下：

const selectFile = () => {
   const input = document.createElement('input');
   input.type = 'file';
   input.multiple = true;
   input.click();

   input.onchange = () => {
     const filesInput = input.files;
     const filesArray = Array.from(filesInput);

     const filesPreUpload = filesArray.map(file => ({
       file,
       id: uuidv4(),
     }));

   setSelectedFiles(filesPreUpload);
   };
};

问题原因 #

Safari对文件选择器的触发有严格的用户交互同步校验：动态创建的input元素如果未挂载到DOM树中，浏览器会认为该触发操作并非来自真实的用户交互链，从而拦截click事件，导致首次点击无响应。

解决方案 #

方案1：动态创建后挂载DOM再触发点击

将动态创建的input临时挂载到DOM中，完成操作后移除，避免被Safari的安全机制拦截：

const selectFile = () => {
  const input = document.createElement('input');
  input.type = 'file';
  input.multiple = true;
  // 先将input挂载到DOM
  document.body.appendChild(input);

  input.click();

  input.onchange = () => {
    const filesInput = input.files;
    const filesArray = Array.from(filesInput);

    const filesPreUpload = filesArray.map(file => ({
      file,
      id: uuidv4(),
    }));

    setSelectedFiles(filesPreUpload);
    // 操作完成后移除元素
    document.body.removeChild(input);
  };

  // 处理用户取消选择的情况，也要移除元素
  input.oncancel = () => {
    document.body.removeChild(input);
  };
};

方案2：使用React Ref管理预渲染的隐藏input（推荐）

提前在组件中渲染隐藏的文件选择器，通过Ref控制点击，更符合React的DOM管理范式，兼容性更好：

import { useRef } from 'react';

const YourComponent = () => {
  const fileInputRef = useRef(null);

  const selectFile = () => {
    // 通过Ref触发点击
    fileInputRef.current?.click();
  };

  const handleFileChange = (e) => {
    const filesInput = e.target.files;
    const filesArray = Array.from(filesInput);

    const filesPreUpload = filesArray.map(file => ({
      file,
      id: uuidv4(),
    }));

    setSelectedFiles(filesPreUpload);
    // 重置input值，允许重复选择同一文件
    e.target.value = '';
  };

  return (
    <>
      {/* 隐藏的文件选择器 */}
      <input
        ref={fileInputRef}
        type="file"
        multiple
        style={{ display: 'none' }}
        onChange={handleFileChange}
      />
      <button onClick={selectFile} disabled={!selectFile}>选择文件</button>
    </>
  );
};

方案说明 #

• 方案1通过临时挂载DOM，让Safari识别到input的点击操作属于合法用户交互，避免被拦截；同时在操作完成后清理DOM，避免冗余元素。
• 方案2采用React原生的Ref机制管理DOM元素，完全规避动态创建元素的兼容性问题，还解决了重复选择同一文件不触发onchange的额外问题。

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