docs

src/components/Modal.js

@@ -2,19 +2,21 @@ import { $html, $watch } from "sigpro";
 import { tt } from "../core/i18n.js";
 import { Button } from "./Button.js";
 
-/** MODAL (Recommended Method: HTML <dialog>) */
+/** MODAL REACTIVO NATIVO */
 export const Modal = (props, children) => {
   const { title, buttons, open, ...rest } = props;
   const dialogRef = { current: null };
 
+  // Sincronizamos la señal con los métodos nativos del navegador
   $watch(() => {
-    const el = dialogRef.current;
-    if (!el) return;
-    
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
     if (open()) {
-      if (!el.open) el.showModal();
+      // Solo abrimos si no está ya abierto (evita bucles)
+      if (!dialog.open) dialog.showModal();
     } else {
-      if (el.open) el.close();
+      if (dialog.open) dialog.close();
     }
   });
 
@@ -27,7 +29,8 @@ export const Modal = (props, children) => {
     ...rest,
     ref: dialogRef,
     class: "modal",
-    oncancel: close
+    // Importante: Si el usuario pulsa ESC, actualizamos la señal
+    oncancel: () => open(false) 
   }, [
     $html("div", { class: "modal-box" }, [
       title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
@@ -39,12 +42,13 @@ export const Modal = (props, children) => {
         Button({ type: "button", onclick: close }, tt("close")()),
       ]),
     ]),
+    // Backdrop nativo que sincroniza con la señal
     $html("form", { 
       method: "dialog", 
       class: "modal-backdrop",
       onsubmit: close 
     }, [
-      $html("button", { onclick: close }, "close")
+      $html("button", {}, "close")
     ])
   ]);
 };