使用HeroUI的Button弹出Modal组件时网页卡死

[lightumcc]

问题描述

当使用HeroUI 2.2.2x的时候如果尝试在页面中通过Button组件打开一个Modal组件

若mutationObserve配置项为true时，页面会卡死，进而导致标签页崩溃

复现步骤

制作如下网页

• page.tsx

import SelectedEntryTable from "@/components/SelectedEntryTable";
import WatermarkComponent from "@/components/Watermark";

<Card className="w-full grow dark:bg-gray-900">
  <CardBody className="w-full h-full flex flex-col items-center justify-center text-gray-500">
    <SelectedEntryTable/>
  </CardBody>
</Card>

{session && (
  <WatermarkComponent session={session} />
)}

• SelectedEntryTable

const signSoeModal = useDisclosure();

<Button
  variant="flat"
  startContent={<FileText size={18} />}
  onPress={signSoeModal.onOpen}
>
  {t("View & Sign SOE")}
</Button>

<SignSOEModal
  isOpen={signSoeModal.isOpen}
  onOpenChange={signSoeModal.onOpenChange}
  onClose={signSoeModal.onClose}
/>

• Watermark.tsx

'use client';

import { BlindWatermark } from 'watermark-js-plus';
import { useEffect } from 'react';
import { useTheme } from 'next-themes';

interface WatermarkProps {
  session?: any;
}

export default function WatermarkComponent({ session }: WatermarkProps) {
  const { resolvedTheme } = useTheme();
  const formatted_date = new Intl.DateTimeFormat("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false,
  }).format(new Date()).replaceAll("-", "/");
  useEffect(() => {
    if (!session) return;

    const watermark = new BlindWatermark({
      "width": 220,
      "height": 100,
      "rotate": 0,
      "lineHeight": 20,
      "fontSize": "16px",
      "contentType": "multi-line-text",
      "content": `一些内容`,
      "translatePlacement": "middle",
      "backgroundPosition": "0 0, 0 0",
      "backgroundRepeat": "repeat",
      "parent": "body",
      "zIndex": 10000,
      "mutationObserve": true,
      "monitorProtection": false,
      "movable": true,
      ...(resolvedTheme === "light" && { fontColor: '#111'}),
      ...(resolvedTheme === 'dark' && { fontColor: '#FF0' })
    })

    watermark.create();

    return () => {
      watermark.destroy();
    };
  }, [session, resolvedTheme]);
  return null;
}

环境详情

• **watermark-js-plus version:1.6.3
• **react version:18.3.1
• **react-dom version:18.3.1