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:
1 parent
b514e282a1
commit
6c926203f0
1 file changed
+8
-9
@@ -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
|
||||
Reference in new issue
Block a user