fix: ConfirmDialog uses forwardRef for React 18 compatibility

React 18 doesn't pass ref as a regular prop to function components — it
needs forwardRef. Without it, the <dialog> element never received the
ref, so showModal() had no target. Click icon, nothing happens.

This was the real bug behind 'click icon, nothing happens' — Gallery
was already using ConfirmDialog but the ref was silently null.
This commit is contained in:
rin.kagamine committed 2026-05-31 11:12:10 -04:00
1 parent b514e282a1
commit 6c926203f0
1 file changed
+8 -9
+8 -9
View File
@@ -1,8 +1,6 @@
import { useEffect } from 'react'
import { useEffect, forwardRef } from 'react'
interface Props {
/** The <dialog> element ref — call ref.current?.showModal() to open. */
ref?: React.Ref<HTMLDialogElement>
/** Title shown in the dialog header. */
title: string
/** Body text explaining what will happen. */
@@ -17,18 +15,17 @@ interface Props {
danger?: boolean
}
export default function ConfirmDialog({
ref,
const ConfirmDialog = forwardRef<HTMLDialogElement, Props>(function ConfirmDialog({
title,
message,
confirmLabel = 'Confirm',
onConfirm,
onCancel,
danger = true,
}: Props) {
}, ref) {
useEffect(() => {
const dialog = ref && 'current' in ref ? ref.current : null
if (!dialog) return
if (!ref || !('current' in ref) || !ref.current) return
const dialog = ref.current
const handleClose = () => onCancel?.()
dialog.addEventListener('close', handleClose)
@@ -78,4 +75,6 @@ export default function ConfirmDialog({
</form>
</dialog>
)
}
})
export default ConfirmDialog