fix: correctly set dialog's cancel event handler

Fixes: #477

src/components/modal/ConfirmModal.tsx

@@ -72,7 +72,7 @@ export function ConfirmModal(props: ConfirmModalProps) {
     children,
   } = props;
 
-  const { ref, onClick } = useDialog({
+  const dialogProps = useDialog({
     isOpen,
     requestCloseOnEsc,
     requestCloseOnBackdrop,
@@ -85,7 +85,7 @@ export function ConfirmModal(props: ConfirmModalProps) {
 
   return (
     <Portal>
-      <ConfirmModalDialog ref={ref} onClick={onClick}>
+      <ConfirmModalDialog {...dialogProps}>
         <ConfirmModalContents headerColor={headerColor} style={{ maxWidth }}>
           <ConfirmModalChildrenRoot headerColor={headerColor}>
             {children}

src/components/modal/Modal.tsx

@@ -69,7 +69,7 @@ export function Modal(props: ModalProps) {
     height,
   } = props;
 
-  const { ref, onClick } = useDialog({
+  const dialogProps = useDialog({
     isOpen,
     requestCloseOnEsc,
     requestCloseOnBackdrop,
@@ -82,7 +82,7 @@ export function Modal(props: ModalProps) {
 
   return (
     <Portal>
-      <DialogRoot ref={ref} onClick={onClick}>
+      <DialogRoot {...dialogProps}>
         <DialogContents
           style={{
             maxWidth,

src/components/modal/useDialog.ts

@@ -1,4 +1,11 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  MouseEventHandler,
+  ReactEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
+import { useKbsDisableGlobal } from 'react-kbs';
 
 export function useDialog({
   isOpen,
@@ -11,32 +18,30 @@ export function useDialog({
   requestCloseOnBackdrop: boolean;
   onRequestClose?: () => void;
 }) {
-  const ref = useRef<HTMLDialogElement>(null);
+  useKbsDisableGlobal(isOpen);
 
-  useEffect(() => {
-    function onEsc(event: Event) {
-      event.preventDefault();
-      if (requestCloseOnEsc && onRequestClose) {
-        onRequestClose();
-      }
-    }
-    const dialog = ref.current;
-    if (dialog) {
-      dialog.addEventListener('cancel', onEsc);
-      return () => dialog.removeEventListener('cancel', onEsc);
-    }
-  }, [onRequestClose, requestCloseOnEsc]);
+  const dialogRef = useRef<HTMLDialogElement>(null);
 
   useEffect(() => {
-    const dialog = ref.current;
+    const dialog = dialogRef.current;
     if (dialog && isOpen) {
       dialog.showModal();
       return () => dialog.close();
     }
   }, [isOpen]);
 
-  const onClick = useCallback(
-    (event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => {
+  const onCancel = useCallback<ReactEventHandler<HTMLDialogElement>>(
+    (event) => {
+      event.preventDefault();
+      if (requestCloseOnEsc && onRequestClose) {
+        onRequestClose();
+      }
+    },
+    [onRequestClose, requestCloseOnEsc],
+  );
+
+  const onClick = useCallback<MouseEventHandler<HTMLDialogElement>>(
+    (event) => {
       // Since the dialog has no size of itself, this condition is only
       // `true` when we click on the backdrop.
       if (event.target === event.currentTarget && requestCloseOnBackdrop) {
@@ -46,5 +51,5 @@ export function useDialog({
     [requestCloseOnBackdrop, onRequestClose],
   );
 
-  return { ref, onClick };
+  return { ref: dialogRef, onClick, onCancel };
 }