React Select模态框关闭后自动重聚焦问题求助

嘿，我之前也碰到过一模一样的情况！核心问题是react-select在选择选项后会自动维持焦点状态，再加上模态框关闭时浏览器默认会把焦点切回打开模态框前的活跃元素，俩行为叠加就导致了这个烦人的自动聚焦。

下面给你几个靠谱的解决思路，按易用性排序：

1. 手动让react-select失去焦点（最推荐） #

给react-select加个ref，在模态框关闭的回调里主动调用blur()方法，强制它失去焦点：

import { useRef, useState } from 'react';
import Select from 'react-select';
import Modal from 'react-modal';

function App() {
  const selectRef = useRef(null);
  const [modalIsOpen, setModalIsOpen] = useState(false);

  const handleOptionSelect = () => {
    setModalIsOpen(true);
  };

  const closeModal = () => {
    setModalIsOpen(false);
    // 模态框一关，就让select失去焦点
    if (selectRef.current) {
      selectRef.current.blur();
    }
  };

  return (
    <div className="App">
      <Select 
        ref={selectRef}
        onChange={handleOptionSelect}
        options={[{ value: 'test', label: '测试选项' }]}
      />
      <Modal 
        isOpen={modalIsOpen} 
        onRequestClose={closeModal}
        contentLabel="示例模态框"
      >
        <h2>这是模态框内容</h2>
        <button onClick={closeModal}>关闭模态框</button>
      </Modal>
    </div>
  );
}

export default App;

2. 禁用模态框的焦点恢复功能 #

如果你用的是react-modal，可以直接关掉它默认的焦点恢复行为，加个shouldRestoreFocus={false}属性就行：

<Modal 
  isOpen={modalIsOpen} 
  onRequestClose={closeModal}
  contentLabel="示例模态框"
  shouldRestoreFocus={false}
>
  {/* 模态框内容 */}
</Modal>

⚠️ 注意：关掉这个后要自己处理焦点问题，比如把焦点移到页面的其他元素（比如页面标题），不然会影响无障碍访问哦。

3. 延迟执行blur（应对时机冲突） #

如果上面两种方法都没生效，大概率是模态框关闭的时机和焦点恢复的时机撞了，加个100ms左右的小延迟试试：

const closeModal = () => {
  setModalIsOpen(false);
  setTimeout(() => {
    selectRef.current?.blur();
  }, 100);
};

题外话（针对你实际项目） #

虽然你示例用了react-modal，但实际项目没用到也没关系——原理都是一样的：找到你项目中模态框关闭的回调函数，在里面调用react-select的blur()方法，或者调整模态框的焦点设置就搞定啦。

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