@jsenv/navi 0.26.33 → 0.26.35

package/dist/jsenv_navi.js

@@ -20282,10 +20282,15 @@ const useExecuteAction = (
       removeErrorMessage();
       setError(null);
 
-      const validationMessageTarget = requester || elementRef.current;
+      const element = elementRef.current;
+      const validationMessageTarget = requester || element;
       validationMessageTargetRef.current = validationMessageTarget;
 
-      dispatchPublicCustomEvent("navi_action_start", sharedActionEventDetail);
+      dispatchPublicCustomEvent(
+        element,
+        "navi_action_start",
+        sharedActionEventDetail,
+      );
 
       return action[method]({
         reason: `"${event.type}" event on ${(() => {
@@ -20304,26 +20309,28 @@ const useExecuteAction = (
           return `<${tagName}>`;
         })()}`,
         onAbort: (reason) => {
+          const element = elementRef.current;
           if (
             // at this stage the action side effect might have removed the <element> from the DOM
             // (in theory no because action side effect are batched to happen after)
             // but other side effects might do this
-            elementRef.current
+            element
           ) {
-            dispatchPublicCustomEvent("navi_action_abort", {
+            dispatchPublicCustomEvent(element, "navi_action_abort", {
               ...sharedActionEventDetail,
               reason,
             });
           }
         },
         onError: (error) => {
+          const element = elementRef.current;
           if (
             // at this stage the action side effect might have removed the <element> from the DOM
             // (in theory no because action side effect are batched to happen after)
             // but other side effects might do this
-            elementRef.current
+            element
           ) {
-            dispatchPublicCustomEvent("navi_action_error", {
+            dispatchPublicCustomEvent(element, "navi_action_error", {
               ...sharedActionEventDetail,
               error,
             });
@@ -20335,13 +20342,14 @@ const useExecuteAction = (
           }
         },
         onComplete: (data) => {
+          const element = elementRef.current;
           if (
             // at this stage the action side effect might have removed the <element> from the DOM
             // (in theory no because action side effect are batched to happen after)
             // but other side effects might do this
-            elementRef.current
+            element
           ) {
-            dispatchPublicCustomEvent("navi_action_end", {
+            dispatchPublicCustomEvent(element, "navi_action_end", {
               ...sharedActionEventDetail,
               data,
             });
@@ -31545,11 +31553,11 @@ const SelectWithPopover = props => {
       anchor: ref.current
     });
   };
-  const [shouldIgnoreThatClick, disableClickFor] = useIgnoreClickForMousedown();
+  const disableClickFor = useIgnoreClickForMousedown();
   const requestClose = (e = new CustomEvent("programmatic")) => {
     if (e.type === "mousedown") {
       debugPopup(formatEventSideEffect(e, `disable click`));
-      disableClickFor(e);
+      disableClickFor();
     }
     return requestPopoverClose(popoverRef.current, {
       event: e
@@ -31593,10 +31601,6 @@ const SelectWithPopover = props => {
         // click triggered by enter won't open the popover
         return;
       }
-      if (shouldIgnoreThatClick) {
-        debugPopup(formatEventSideEffect(e, `ignore click`));
-        return;
-      }
       // When a label is clicked it transfers focus to the select
       // in that case we want to open it (otherwise we have already opened on mousedown interaction)
       requestOpen(e);
@@ -31731,11 +31735,11 @@ const SelectWithDialog = props => {
       event: e
     });
   };
-  const [shouldIgnore, disableClickFor] = useIgnoreClickForMousedown();
+  const disableClickFor = useIgnoreClickForMousedown();
   const requestClose = (e = new CustomEvent("programmatic")) => {
     if (e.type === "mousedown") {
       debugPopup(formatEventSideEffect(e, `disable click`));
-      disableClickFor(e);
+      disableClickFor();
     }
     return requestDialogClose(dialogRef.current, {
       event: e
@@ -31778,12 +31782,6 @@ const SelectWithDialog = props => {
         // click triggered by enter won't open the dialog
         return;
       }
-      if (shouldIgnore) {
-        debugPopup(formatEventSideEffect(e, `ignore click`));
-        // mousedown on the select already handled open/close; ignore this click
-        // to avoid toggling the dialog again on mouseup
-        return;
-      }
       // When a label is clicked it transfers focus to the select, in that case we want to open it
       requestOpen(e);
     },
@@ -31855,8 +31853,8 @@ const useSelectRequestClose = () => {
 };
 
 /**
- * Hook to prevent a `click` event from firing after a `mousedown` that already
- * handled an open/close action.
+ * Returns a `disableClickFor` function that suppresses the `click` event that
+ * the browser fires after a `mousedown` which already handled an open/close action.
  *
  * Problem: when the user clicks a dialog's backdrop to close it, the browser
  * fires `mousedown` on the backdrop (which closes the dialog), then fires
@@ -31864,47 +31862,27 @@ const useSelectRequestClose = () => {
  * element is the trigger button that originally opened the dialog, the `click`
  * would immediately re-open it.
  *
- * This problem only occurs when the dialog is closed on `mousedown`. If the
- * dialog were closed on `click` instead, the dialog would still be open when
- * the `click` fires on the backdrop, so the trigger button underneath would
- * never receive that `click`.
- *
  * Calling `stopPropagation()` or `preventDefault()` on the backdrop `mousedown`
  * does not help: the browser dispatches the subsequent `click` regardless,
  * targeting whichever element ends up under the pointer after the dialog closes.
  *
- * Usage:
- *   const [shouldIgnoreThatClick, disableClickFor] = useIgnoreClickForMousedown();
- *   // In onMouseDown (e.g. on the dialog backdrop): disableClickFor(e)
- *   // In onClick (on the trigger): if (shouldIgnoreThatClick) return;
- *
- * `disableClickFor` arms the guard until the next `mouseup` on the document
- * (with a 1 s safety-net fallback), using `requestAnimationFrame` so the
- * `click` event — which fires synchronously after `mouseup` — is still blocked.
+ * Solution: register a self-removing capture-phase `click` listener on `document`
+ * so the click is intercepted before it reaches any element handler.
  */
 const useIgnoreClickForMousedown = () => {
-  const pendingMousedownRef = useRef(false);
-  const shouldIgnore = pendingMousedownRef.current;
   const disableClickFor = () => {
-    pendingMousedownRef.current = true;
-    const restoreClick = () => {
-      clearTimeout(safetyTimeout);
-      pendingMousedownRef.current = false;
-    };
-    const safetyTimeout = setTimeout(() => {
-      pendingMousedownRef.current = false;
-      restoreClick();
-    }, 1000);
-    document.addEventListener("mouseup", () => {
-      requestAnimationFrame(() => {
-        restoreClick();
+    const suppressClick = clickEvent => {
+      clickEvent.stopPropagation();
+      clickEvent.preventDefault();
+      document.removeEventListener("click", suppressClick, {
+        capture: true
       });
-    }, {
-      once: true,
+    };
+    document.addEventListener("click", suppressClick, {
       capture: true
     });
   };
-  return [shouldIgnore, disableClickFor];
+  return disableClickFor;
 };
 
 /**