Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

BottomSheet: fix esc key won't correctly close
All checks were successful
/ depoly (push) Successful in 1m18s
Details

Browse source
This commit is contained in:
thislight 2024-11-08 15:24:25 +08:00
parent 481930264e
commit 5afaf21f4b
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
1 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/material/BottomSheet.tsx
View file

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