@mshuja288/aksuicore 0.4.3 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mshuja288/aksuicore",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Shared UI components and templates for Ikssam applications",
   "license": "UNLICENSED",
   "type": "module",

package/src/primitives/Dialog.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import type { ReactNode } from "react";
+import type { MouseEvent, ReactNode } from "react";
+import { useEffect, useRef } from "react";
 import { Button } from "./Button";
 
 export function Dialog({
@@ -16,18 +17,42 @@ export function Dialog({
   children: ReactNode;
   wide?: boolean;
 }) {
+  const allowBackdropClose = useRef(false);
+
+  useEffect(() => {
+    if (!open) {
+      allowBackdropClose.current = false;
+      return;
+    }
+
+    // Ignore the opening gesture so View/Update clicks cannot close the dialog immediately.
+    allowBackdropClose.current = false;
+    const timer = window.setTimeout(() => {
+      allowBackdropClose.current = true;
+    }, 0);
+
+    return () => window.clearTimeout(timer);
+  }, [open]);
+
   if (!open) {
     return null;
   }
 
+  function onBackdropMouseDown(event: MouseEvent<HTMLDivElement>) {
+    if (event.target !== event.currentTarget || !allowBackdropClose.current) {
+      return;
+    }
+    onClose();
+  }
+
   return (
-    <div className="dialog-backdrop" onClick={onClose}>
+    <div className="dialog-backdrop" onMouseDown={onBackdropMouseDown}>
       <div
         className={wide ? "dialog form-dialog" : "dialog"}
         role="dialog"
         aria-modal="true"
         aria-label={title}
-        onClick={(event) => event.stopPropagation()}
+        onMouseDown={(event) => event.stopPropagation()}
       >
         <div className="dialog-head">
           <h2>{title}</h2>