ReactJS 18+MDBootstrap模态框内表单Tab键无法切换输入框问题

问题分析 #

你遇到的Tab/Shift+Tab无法在模态框内表单输入框间切换焦点的问题，核心原因是MDBootstrap模态框默认的焦点陷阱（Focus Trap）逻辑与复用表单的场景冲突——它会将焦点锁定在模态框内的特定元素上，覆盖了原生的Tab键行为；而表单单独使用时不受焦点陷阱影响，所以正常工作。

解决方案 #

1. 禁用模态框默认焦点陷阱（如果组件支持） #

先检查你使用的MDBootstrap版本，部分版本的MDBModal组件提供了focusTrap属性，直接设置为false即可禁用默认的焦点锁定逻辑：

<MDBModal focusTrap={false} ...>
  {/* 你的复用表单内容 */}
</MDBModal>

2. 手动实现模态框内的焦点切换逻辑 #

如果禁用焦点陷阱后原生Tab行为仍异常，或者你的MDB版本不支持focusTrap属性，可以手动监听Tab键事件，自定义焦点切换逻辑：

步骤1：创建模态框引用和事件处理函数

import { useRef } from 'react';

const YourModalComponent = () => {
  const modalRef = useRef(null);

  // 处理Tab键切换焦点
  const handleModalKeyDown = (e) => {
    if (e.key !== 'Tab') return;

    // 获取模态框内所有可聚焦元素
    const focusableElements = modalRef.current.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    if (focusableElements.length === 0) return;

    const firstEl = focusableElements[0];
    const lastEl = focusableElements[focusableElements.length - 1];
    const activeEl = document.activeElement;

    // 处理循环焦点：Tab到最后一个元素时跳回第一个
    if (!e.shiftKey && activeEl === lastEl) {
      e.preventDefault();
      firstEl.focus();
    }
    // Shift+Tab到第一个元素时跳回最后一个
    else if (e.shiftKey && activeEl === firstEl) {
      e.preventDefault();
      lastEl.focus();
    }
  };

  // 模态框打开时自动聚焦第一个可聚焦元素
  const handleModalOpen = () => {
    setTimeout(() => {
      const firstFocusable = modalRef.current.querySelector(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      firstFocusable?.focus();
    }, 100); // 延迟确保模态框已渲染完成
  };

  return (
    <MDBModal
      ref={modalRef}
      onKeyDown={handleModalKeyDown}
      onOpen={handleModalOpen}
      // 其他模态框属性
    >
      {/* 你的复用表单组件 */}
    </MDBModal>
  );
};

3. 检查表单元素的tabindex设置 #

确保所有需要参与Tab切换的表单元素（input、button等）：

• 不要设置tabindex="-1"（这会将元素排除在Tab序列外）
• 保持tabindex默认值（0）或显式设置为0，确保元素按DOM顺序参与Tab切换

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