diff --git a/src/components/image-editor/model3d-generation/Model3dGenerationModal.tsx b/src/components/image-editor/model3d-generation/Model3dGenerationModal.tsx index b1dca1c75..e3cb7f0b2 100644 --- a/src/components/image-editor/model3d-generation/Model3dGenerationModal.tsx +++ b/src/components/image-editor/model3d-generation/Model3dGenerationModal.tsx @@ -5,6 +5,7 @@ import type { RefObject, SetStateAction, } from 'react'; +import { useMemo } from 'react'; import { PlatformActionButton } from '../../common/PlatformActionButton'; import { PlatformStatusMessage } from '../../common/PlatformStatusMessage'; @@ -82,9 +83,14 @@ export function Model3dGenerationModal({ const submitDialog = dialog.status === 'failed' ? refreshModel3dAttemptNonce(dialog) : dialog; + // 每次都新建数组会让上面的 dismiss effect 每次渲染都重挂监听;ref 对象本身是稳定的。 + const referenceMenuBoundaryRefs = useMemo( + () => [generationReferenceButtonRef], + [generationReferenceButtonRef], + ); useImageCanvasFloatingOptionDismiss({ isOpen: isImageMode && isGenerationReferenceMenuOpen, - boundaryRefs: [generationReferenceButtonRef], + boundaryRefs: referenceMenuBoundaryRefs, onDismiss: () => setIsGenerationReferenceMenuOpen?.(false), });