PrimeReact可编辑表格下拉框筛选输入框焦点丢失问题

问题根源 #

PrimeReact 9.x版本的Dropdown组件在启用筛选和虚拟滚动时，内部存在异步的焦点重置逻辑（比如虚拟滚动初始化完成后会自动将焦点切回主输入框），导致手动设置的筛选框焦点被覆盖。同时autoFocus属性会加剧焦点冲突。

解决方案 #

1. 移除autoFocus属性 #

首先去掉Dropdown上的autoFocus，避免主输入框初始抢占焦点。

2. 利用onShow事件+延迟聚焦 #

通过Dropdown的onShow事件（下拉面板打开时触发），配合短暂延迟确保面板和筛选框渲染完成后，再强制聚焦筛选框，并阻止主输入框后续窃取焦点。

完整代码示例 #

import { useRef } from 'react';
import { Dropdown } from 'primereact/dropdown';

// 组件内部代码
const dropdownRef = useRef(null);

const handleDropdownShow = () => {
    // 延迟100ms，等待PrimeReact内部逻辑执行完毕
    setTimeout(() => {
        if (!dropdownRef.current) return;
        
        // 获取筛选输入框
        const filterInput = dropdownRef.current.panel?.querySelector('.p-dropdown-filter');
        // 获取主输入框
        const mainInput = dropdownRef.current.input;

        if (filterInput) {
            filterInput.focus();
            
            // 临时阻止主输入框获取焦点，避免后续被内部逻辑覆盖
            if (mainInput) {
                const preventMainFocus = (e) => {
                    e.preventDefault();
                    filterInput.focus();
                    // 只阻止一次，避免影响后续操作
                    mainInput.removeEventListener('focus', preventMainFocus);
                };
                mainInput.addEventListener('focus', preventMainFocus);
            }
        }
    }, 100);
};

// Dropdown组件
<Dropdown
    ref={dropdownRef}
    id="requsitionerDropDown"
    virtualScrollerOptions={{ itemSize: 38 }}
    appendTo={'self'}
    value={options.value}
    filter
    style={{ width: '235%' }}
    options={requisitonerList}
    onChange={(e) => options.editorCallback(e.target.value)}
    optionLabel="value"
    optionValue="value"
    className="w-full md:w-14rem"
    onShow={handleDropdownShow}
/>

可选调整 #

• 如果100ms延迟不够，可尝试调整为200ms，确保覆盖PrimeReact内部的异步焦点操作；
• 若仍存在问题，可检查是否有全局的焦点管理逻辑（如无障碍插件、自定义焦点钩子）干扰。

内容的提问来源于stack exchange，提问作者Samet Dağ