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 {
|
interface Props {
|
||||||
/** The <dialog> element ref — call ref.current?.showModal() to open. */
|
|
||||||
ref?: React.Ref<HTMLDialogElement>
|
|
||||||
/** Title shown in the dialog header. */
|
/** Title shown in the dialog header. */
|
||||||
title: string
|
title: string
|
||||||
/** Body text explaining what will happen. */
|
/** Body text explaining what will happen. */
|
||||||
@@ -17,18 +15,17 @@ interface Props {
|
|||||||
danger?: boolean
|
danger?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ConfirmDialog({
|
const ConfirmDialog = forwardRef<HTMLDialogElement, Props>(function ConfirmDialog({
|
||||||
ref,
|
|
||||||
title,
|
title,
|
||||||
message,
|
message,
|
||||||
confirmLabel = 'Confirm',
|
confirmLabel = 'Confirm',
|
||||||
onConfirm,
|
onConfirm,
|
||||||
onCancel,
|
onCancel,
|
||||||
danger = true,
|
danger = true,
|
||||||
}: Props) {
|
}, ref) {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const dialog = ref && 'current' in ref ? ref.current : null
|
if (!ref || !('current' in ref) || !ref.current) return
|
||||||
if (!dialog) return
|
const dialog = ref.current
|
||||||
|
|
||||||
const handleClose = () => onCancel?.()
|
const handleClose = () => onCancel?.()
|
||||||
dialog.addEventListener('close', handleClose)
|
dialog.addEventListener('close', handleClose)
|
||||||
@@ -78,4 +75,6 @@ export default function ConfirmDialog({
|
|||||||
</form>
|
</form>
|
||||||
</dialog>
|
</dialog>
|
||||||
)
|
)
|
||||||
}
|
})
|
||||||
|
|
||||||
|
export default ConfirmDialog
|
||||||
Reference in new issue
Block a user