React中基于JSON Schema实现TAB键聚焦下拉框的方法

看起来你的问题核心在于自定义下拉组件CustomDropdownWidget没有正确实现可聚焦性和键盘交互逻辑，导致Tab键跳过它直接跳到下一个字段。下面是一步步的解决方案：

一、先定位问题根源 #

首先可以做个快速测试：把MobileCode的ui:widget临时换成原生的select，如果Tab键能正常聚焦，那100%是你的自定义下拉组件缺少了必要的可访问性配置。

// 临时替换测试
MobileCode: {
  // 'ui:widget': 'CustomDropdownWidget',
  classNames: 'customwidth_13',
  'ui:options': { type: 'number', placeholder: 'Mobile number' },
},

二、修复自定义下拉组件的核心要点 #

自定义下拉组件要支持Tab聚焦，必须满足以下几个条件：

1. 确保触发元素具备可聚焦性 #

如果你的自定义下拉是用<div>等非原生可聚焦元素模拟的，必须手动添加tabIndex="0"；如果用<button>或原生<select>则自带可聚焦属性，推荐优先用<button>作为下拉触发按钮。

示例代码片段：

const CustomDropdownWidget = ({ id, options, value, onChange }) => {
  const [isOpen, setIsOpen] = useState(false);
  const triggerRef = useRef(null);

  return (
    <div className="custom-dropdown">
      {/* 用button作为触发元素，原生支持Tab聚焦 */}
      <button
        ref={triggerRef}
        onClick={() => setIsOpen(!isOpen)}
        aria-expanded={isOpen}
        aria-haspopup="listbox"
        className={classNames}
      >
        {/* 显示当前选中的选项 */}
        {options.find(opt => opt.value === value)?.label || 'Select Code'}
      </button>

      {/* 下拉选项列表 */}
      {isOpen && (
        <ul role="listbox" aria-labelledby={id}>
          {options.map(opt => (
            <li
              key={opt.value}
              role="option"
              onClick={() => {
                onChange(opt.value);
                setIsOpen(false);
                triggerRef.current.focus(); // 选择选项后回到触发按钮，保证Tab流连续
              }}
              tabIndex="-1" // 选项通过上下键导航，不需要Tab直接聚焦
            >
              {opt.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

2. 添加键盘事件处理逻辑 #

为了让下拉组件符合键盘交互规范，需要处理这些关键按键：

• Enter/Space：打开/关闭下拉列表
• Tab：关闭下拉列表，让焦点正常跳转到下一个字段
• ArrowUp/ArrowDown：在下拉选项中导航

补充键盘事件的代码：

const handleKeyDown = (e) => {
  switch(e.key) {
    case 'Enter':
    case ' ':
      e.preventDefault();
      setIsOpen(!isOpen);
      break;
    case 'Tab':
      setIsOpen(false);
      break;
    case 'ArrowDown':
      e.preventDefault();
      // 逻辑：移动焦点到下一个选项（可选，提升体验）
      break;
    case 'ArrowUp':
      e.preventDefault();
      // 逻辑：移动焦点到上一个选项（可选，提升体验）
      break;
  }
};

// 把事件绑定到触发按钮上
<button
  ref={triggerRef}
  onClick={() => setIsOpen(!isOpen)}
  onKeyDown={handleKeyDown}
  aria-expanded={isOpen}
  aria-haspopup="listbox"
  className={classNames}
>

3. 避免错误的焦点阻止逻辑 #

检查自定义组件中是否有不必要的e.preventDefault()或e.stopPropagation()，尤其是在焦点相关的事件（如onFocus、onBlur）中，这些可能会打断浏览器原生的Tab流。

三、验证效果 #

修改完自定义组件后，重新绑定到你的JSON Schema Form中，测试Tab键的聚焦顺序：

1. 聚焦FirstName → 按Tab → 聚焦LastName
2. 继续按Tab → 应该能聚焦到MobileCode的触发按钮
3. 按Enter/Space打开下拉列表，选完选项后焦点回到触发按钮，再按Tab就能跳到MobileNumber

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