From 5afaf21f4b9ab93c0793c7cf86a7d3ba386bda12 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Fri, 8 Nov 2024 15:24:25 +0800
Subject: [PATCH] BottomSheet: fix esc key won't correctly close

---
 src/material/BottomSheet.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx
index 4ae9686..c7e0671 100644
--- a/src/material/BottomSheet.tsx
+++ b/src/material/BottomSheet.tsx
@@ -211,8 +211,9 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   ) => {
     if (event.target !== event.currentTarget) return;
     const rect = event.currentTarget.getBoundingClientRect();
-    const isNotInDialog = event.clientY < rect.top ||
-      event.clientY > (rect.bottom) ||
+    const isNotInDialog =
+      event.clientY < rect.top ||
+      event.clientY > rect.bottom ||
       event.clientX < rect.left ||
       event.clientX > rect.right;
     if (isNotInDialog) {
@@ -220,6 +221,12 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     }
   };
 
+  const onDialogCancel = (event: Event) => {
+    event.preventDefault();
+
+    props.onClose?.("backdrop");
+  };
+
   return (
     <dialog
       class={`BottomSheet ${material.surface} ${props.class || ""}`}
@@ -227,6 +234,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
         ["bottom"]: props.bottomUp,
       }}
       onClick={onDialogClick}
+      onCancel={onDialogCancel}
       ref={element!}
       tabIndex={-1}
       role="presentation"