React中HeadlessUI Dialog键盘导航的禁用方案问询

1. 用React上下文统一管理Dialog层级 #

创建一个全局的Dialog管理Context，让所有Dialog（不管来自哪个组件）在打开/关闭时更新上下文里的层级计数。原预览Dialog的键盘导航逻辑只在计数为1（只有自己打开）时生效。

• 实现步骤：
  • 新建DialogContext，包含dialogCount状态和incrementDialog、decrementDialog方法
  • 每个Dialog组件（包括嵌套的分享、举报Dialog）在open状态变为true时调用incrementDialog，变为false时调用decrementDialog（用useEffect监听open状态即可）
  • 原预览Dialog的键盘事件处理函数中，读取dialogCount，当dialogCount > 1时跳过方向键切换逻辑

示例代码：

// DialogContext.js
import { createContext, useContext, useState } from 'react';

const DialogContext = createContext();

export function DialogProvider({ children }) {
  const [dialogCount, setDialogCount] = useState(0);

  const incrementDialog = () => setDialogCount(prev => prev + 1);
  const decrementDialog = () => setDialogCount(prev => prev - 1);

  return (
    <DialogContext.Provider value={{ dialogCount, incrementDialog, decrementDialog }}>
      {children}
    </DialogContext.Provider>
  );
}

export function useDialogContext() {
  return useContext(DialogContext);
}

在任意Dialog组件中使用：

import { Dialog } from '@headlessui/react';
import { useDialogContext } from './DialogContext';

function ShareDialog({ open, onClose }) {
  const { incrementDialog, decrementDialog } = useDialogContext();

  useEffect(() => {
    if (open) incrementDialog();
    else decrementDialog();
  }, [open, incrementDialog, decrementDialog]);

  return (
    <Dialog open={open} onClose={onClose}>
      {/* 内容 */}
    </Dialog>
  );
}

2. 通过焦点判断当前活跃Dialog #

利用HeadlessUI Dialog打开后会自动把焦点移到内部元素的特性，在原预览Dialog的键盘事件处理时，检查当前焦点是否在自己的Dialog之外。

• 实现步骤：
  • 给原预览Dialog的容器元素加一个ref
  • 在方向键事件处理函数中，判断document.activeElement是否不在原Dialog容器内（用ref.current.contains(document.activeElement)）
  • 如果不在，说明当前焦点在嵌套Dialog里，跳过切换逻辑

示例代码：

function PreviewDialog({ open, currentItem, onSwitchItem }) {
  const dialogRef = useRef(null);

  useEffect(() => {
    const handleKeyDown = (e) => {
      if (!open) return;
      // 检查焦点是否在当前Dialog内
      if (!dialogRef.current?.contains(document.activeElement)) return;

      if (e.key === 'ArrowLeft') onSwitchItem('prev');
      else if (e.key === 'ArrowRight') onSwitchItem('next');
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [open, onSwitchItem]);

  return (
    <Dialog open={open} ref={dialogRef}>
      {/* 预览内容 */}
      <ShareDialog />
      <ReportDialog />
    </Dialog>
  );
}

3. 监听自定义事件统计Dialog数量 #

如果没法统一修改所有Dialog组件，可以用原生自定义事件来传递打开/关闭信号。

• 实现步骤：
  • 在每个Dialog的onOpenChange回调中，当打开时触发dialog-opened自定义事件，关闭时触发dialog-closed事件
  • 原预览Dialog中监听这两个事件，维护一个本地的activeDialogs计数
  • 键盘导航逻辑根据activeDialogs是否大于1来决定是否禁用

示例代码：
在嵌套Dialog中：

function ReportDialog({ open, onClose }) {
  useEffect(() => {
    if (open) {
      document.dispatchEvent(new CustomEvent('dialog-opened'));
    } else {
      document.dispatchEvent(new CustomEvent('dialog-closed'));
    }
  }, [open]);

  return <Dialog open={open} onClose={onClose}>{/* 内容 */}</Dialog>;
}

在原预览Dialog中：

function PreviewDialog({ open, onSwitchItem }) {
  const [activeDialogs, setActiveDialogs] = useState(0);

  useEffect(() => {
    const handleDialogOpened = () => setActiveDialogs(prev => prev + 1);
    const handleDialogClosed = () => setActiveDialogs(prev => prev - 1);

    document.addEventListener('dialog-opened', handleDialogOpened);
    document.addEventListener('dialog-closed', handleDialogClosed);

    return () => {
      document.removeEventListener('dialog-opened', handleDialogOpened);
      document.removeEventListener('dialog-closed', handleDialogClosed);
    };
  }, []);

  useEffect(() => {
    const handleKeyDown = (e) => {
      if (!open || activeDialogs > 1) return;

      if (e.key === 'ArrowLeft') onSwitchItem('prev');
      else if (e.key === 'ArrowRight') onSwitchItem('next');
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [open, activeDialogs, onSwitchItem]);

  return <Dialog open={open}>{/* 内容 */}</Dialog>;
}

4. 优化原有的Portal检测方案 #

如果想保留原思路，可以让检测更精准：给原预览Dialog的Portal加自定义属性，然后排除自身只统计其他Portal数量。

• 实现步骤：
  • 给原预览Dialog的Portal元素添加自定义属性，比如data-preview-portal
  • 在键盘事件处理中，统计document.querySelectorAll('[data-headlessui-portal]:not([data-preview-portal])').length
  • 当数量大于0时禁用导航

示例代码：

function PreviewDialog({ open, onSwitchItem }) {
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (!open) return;

      // 统计非预览Dialog的Portal数量
      const otherPortals = document.querySelectorAll('[data-headlessui-portal]:not([data-preview-portal])');
      if (otherPortals.length > 0) return;

      if (e.key === 'ArrowLeft') onSwitchItem('prev');
      else if (e.key === 'ArrowRight') onSwitchItem('next');
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [open, onSwitchItem]);

  // HeadlessUI的Dialog可以通过Portal组件自定义属性
  return (
    <Dialog open={open}>
      <Dialog.Portal data-preview-portal>
        {/* 预览内容 */}
      </Dialog.Portal>
    </Dialog>
  );
}

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