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"