@jsenv/navi 0.9.2 → 0.10.0

package/src/validation/custom_constraint_validation.js

@@ -27,6 +27,20 @@
  * - Validation messages that follow the input element and adapt to viewport
  */
 
+/**
+ * To enable this API one have to call installCustomConstraintValidation(element)
+ * on the <form> and every element within the <form> (<input>, <button>, etc.)
+ * (In practice this is done automatically by jsx components in navi package)
+ *
+ * Once installed code must now listen to specific action events on the <form>
+ * (not "submit" but "actionrequested" most notably)
+ *
+ * There is one way to fully bypass validation which is to call form.submit()
+ * just like you could do with the native validation API to bypass validation.
+ * We keep this behavior on purpose but in practice you always want to go through the form validation process
+ */
+
+import { createPubSub } from "@jsenv/dom";
 import { openCallout } from "../components/callout/callout.js";
 import {
   DISABLED_CONSTRAINT,
@@ -40,6 +54,8 @@ import {
   TYPE_NUMBER_CONSTRAINT,
 } from "./constraints/native_constraints.js";
 import { READONLY_CONSTRAINT } from "./constraints/readonly_constraint.js";
+import { SAME_AS_CONSTRAINT } from "./constraints/same_as_constraint.js";
+import { listenInputChange } from "./input_change_effect.js";
 
 let debug = false;
 
@@ -49,9 +65,9 @@ export const requestAction = (
   target,
   action,
   {
+    actionOrigin,
     event,
     requester = target,
-    actionOrigin,
     method = "rerun",
     meta = {},
     confirmMessage,
@@ -132,12 +148,8 @@ export const requestAction = (
     // Single element validation case
     isValid = validationInterface.checkValidity({ fromRequestAction: true });
     if (!isValid) {
-      if (event) {
-        event.preventDefault();
-      }
       validationInterface.reportValidity();
     }
-
     elementForConfirmation = target;
     elementForDispatch = target;
   }
@@ -180,6 +192,15 @@ export const requestAction = (
   return true;
 };
 
+export const forwardActionRequested = (e, action, target = e.target) => {
+  requestAction(target, action, {
+    actionOrigin: e.detail?.actionOrigin,
+    event: e.detail?.event || e,
+    requester: e.detail?.requester,
+    meta: e.detail?.meta,
+  });
+};
+
 export const closeValidationMessage = (element, reason) => {
   const validationInterface = element.__validationInterface__;
   if (!validationInterface) {
@@ -200,6 +221,7 @@ export const checkValidity = (element) => {
   return validationInterface.checkValidity();
 };
 
+const formInstrumentedWeakSet = new WeakSet();
 export const installCustomConstraintValidation = (
   element,
   elementReceivingValidationMessage = element,
@@ -218,20 +240,25 @@ export const installCustomConstraintValidation = (
     validationMessage: null,
   };
 
-  const cleanupCallbackSet = new Set();
+  const [teardown, addTeardown] = createPubSub();
   cleanup: {
     const uninstall = () => {
-      for (const cleanupCallback of cleanupCallbackSet) {
-        cleanupCallback();
-      }
-      cleanupCallbackSet.clear();
+      teardown();
     };
     validationInterface.uninstall = uninstall;
   }
 
+  const isForm = element.tagName === "FORM";
+  if (isForm) {
+    formInstrumentedWeakSet.add(element);
+    addTeardown(() => {
+      formInstrumentedWeakSet.delete(element);
+    });
+  }
+
   expose_as_node_property: {
     element.__validationInterface__ = validationInterface;
-    cleanupCallbackSet.add(() => {
+    addTeardown(() => {
       delete element.__validationInterface__;
     });
   }
@@ -240,7 +267,6 @@ export const installCustomConstraintValidation = (
     const cancelEvent = new CustomEvent("cancel", options);
     element.dispatchEvent(cancelEvent);
   };
-
   const closeElementValidationMessage = (reason) => {
     if (validationInterface.validationMessage) {
       validationInterface.validationMessage.close(reason);
@@ -260,6 +286,7 @@ export const installCustomConstraintValidation = (
   constraintSet.add(MIN_CONSTRAINT);
   constraintSet.add(MAX_CONSTRAINT);
   constraintSet.add(READONLY_CONSTRAINT);
+  constraintSet.add(SAME_AS_CONSTRAINT);
   register_constraint: {
     validationInterface.registerConstraint = (constraint) => {
       if (typeof constraint === "function") {
@@ -278,6 +305,8 @@ export const installCustomConstraintValidation = (
   let failedConstraintInfo = null;
   const validityInfoMap = new Map();
 
+  const hasTitleAttribute = element.hasAttribute("title");
+
   const resetValidity = ({ fromRequestAction } = {}) => {
     if (fromRequestAction && failedConstraintInfo) {
       for (const [key, customMessage] of customMessageMap) {
@@ -295,7 +324,7 @@ export const installCustomConstraintValidation = (
     validityInfoMap.clear();
     failedConstraintInfo = null;
   };
-  cleanupCallbackSet.add(resetValidity);
+  addTeardown(resetValidity);
 
   const checkValidity = ({ fromRequestAction, skipReadonly } = {}) => {
     resetValidity({ fromRequestAction });
@@ -340,7 +369,16 @@ export const installCustomConstraintValidation = (
       validityInfoMap.set(constraint, failedConstraintInfo);
     }
 
-    if (!failedConstraintInfo) {
+    if (failedConstraintInfo) {
+      if (!hasTitleAttribute) {
+        // when a constraint is failing browser displays that constraint message if the element has no title attribute.
+        // We want to do the same with our message (overriding the browser in the process to get better messages)
+        element.setAttribute("title", failedConstraintInfo.message);
+      }
+    } else {
+      if (!hasTitleAttribute) {
+        element.removeAttribute("title");
+      }
       closeElementValidationMessage("becomes_valid");
     }
 
@@ -366,9 +404,9 @@ export const installCustomConstraintValidation = (
     if (!skipFocus) {
       element.focus();
     }
-    const closeOnCleanup = () => {
+    const removeCloseOnCleanup = addTeardown(() => {
       closeElementValidationMessage("cleanup");
-    };
+    });
 
     const anchorElement =
       failedConstraintInfo.target || elementReceivingValidationMessage;
@@ -379,7 +417,7 @@ export const installCustomConstraintValidation = (
         level: failedConstraintInfo.level,
         closeOnClickOutside: failedConstraintInfo.closeOnClickOutside,
         onClose: () => {
-          cleanupCallbackSet.delete(closeOnCleanup);
+          removeCloseOnCleanup();
           validationInterface.validationMessage = null;
           if (failedConstraintInfo) {
             failedConstraintInfo.reportStatus = "closed";
@@ -391,7 +429,6 @@ export const installCustomConstraintValidation = (
       },
     );
     failedConstraintInfo.reportStatus = "reported";
-    cleanupCallbackSet.add(closeOnCleanup);
   };
   validationInterface.checkValidity = checkValidity;
   validationInterface.reportValidity = reportValidity;
@@ -426,7 +463,7 @@ export const installCustomConstraintValidation = (
         reportValidity();
       }
     };
-    cleanupCallbackSet.add(() => {
+    addTeardown(() => {
       customMessageMap.clear();
     });
     Object.assign(validationInterface, {
@@ -435,6 +472,7 @@ export const installCustomConstraintValidation = (
     });
   }
 
+  checkValidity();
   close_and_check_on_input: {
     const oninput = () => {
       customMessageMap.clear();
@@ -442,7 +480,7 @@ export const installCustomConstraintValidation = (
       checkValidity();
     };
     element.addEventListener("input", oninput);
-    cleanupCallbackSet.add(() => {
+    addTeardown(() => {
       element.removeEventListener("input", oninput);
     });
   }
@@ -454,13 +492,7 @@ export const installCustomConstraintValidation = (
       checkValidity();
     };
     element.addEventListener("actionend", onactionend);
-    if (element.form) {
-      element.form.addEventListener("actionend", onactionend);
-      cleanupCallbackSet.add(() => {
-        element.form.removeEventListener("actionend", onactionend);
-      });
-    }
-    cleanupCallbackSet.add(() => {
+    addTeardown(() => {
       element.removeEventListener("actionend", onactionend);
     });
   }
@@ -470,37 +502,119 @@ export const installCustomConstraintValidation = (
     element.reportValidity = () => {
       reportValidity();
     };
-    cleanupCallbackSet.add(() => {
+    addTeardown(() => {
       element.reportValidity = nativeReportValidity;
     });
   }
 
-  dispatch_request_submit_call_on_form: {
-    const onRequestSubmit = (form, e) => {
-      if (form !== element.form && form !== element) {
+  request_on_enter: {
+    if (element.tagName !== "INPUT") {
+      // maybe we want it too for checkboxes etc, we'll see
+      break request_on_enter;
+    }
+    const onkeydown = (keydownEvent) => {
+      if (keydownEvent.defaultPrevented) {
         return;
       }
-
-      const requestSubmitCustomEvent = new CustomEvent("requestsubmit", {
-        cancelable: true,
-        detail: { cause: e },
+      if (keydownEvent.key !== "Enter") {
+        return;
+      }
+      if (element.hasAttribute("data-action")) {
+        if (wouldKeydownSubmitForm(keydownEvent)) {
+          keydownEvent.preventDefault();
+        }
+        dispatchActionRequestedCustomEvent(element, {
+          event: keydownEvent,
+          requester: element,
+        });
+        return;
+      }
+      const { form } = element;
+      if (!form) {
+        return;
+      }
+      keydownEvent.preventDefault();
+      dispatchActionRequestedCustomEvent(form, {
+        event: keydownEvent,
+        requester: getFirstButtonSubmittingForm(form) || element,
       });
-      form.dispatchEvent(requestSubmitCustomEvent);
-      if (requestSubmitCustomEvent.defaultPrevented) {
-        e.preventDefault();
+    };
+    element.addEventListener("keydown", onkeydown);
+    addTeardown(() => {
+      element.removeEventListener("keydown", onkeydown);
+    });
+  }
+
+  request_on_button_click: {
+    const onclick = (clickEvent) => {
+      if (clickEvent.defaultPrevented) {
+        return;
+      }
+      if (element.tagName !== "BUTTON") {
+        return;
       }
+      if (element.hasAttribute("data-action")) {
+        if (wouldClickSubmitForm(clickEvent)) {
+          clickEvent.preventDefault();
+        }
+        dispatchActionRequestedCustomEvent(element, {
+          event: clickEvent,
+          requester: element,
+        });
+        return;
+      }
+      const { form } = element;
+      if (!form) {
+        return;
+      }
+      if (wouldClickSubmitForm(clickEvent)) {
+        clickEvent.preventDefault();
+      }
+      dispatchActionRequestedCustomEvent(form, {
+        event: clickEvent,
+        requester: element,
+      });
     };
-    requestSubmitCallbackSet.add(onRequestSubmit);
-    cleanupCallbackSet.add(() => {
-      requestSubmitCallbackSet.delete(onRequestSubmit);
+    element.addEventListener("click", onclick);
+    addTeardown(() => {
+      element.removeEventListener("click", onclick);
+    });
+  }
+
+  request_on_input_change: {
+    const isInput =
+      element.tagName === "INPUT" || element.tagName === "TEXTAREA";
+    if (!isInput) {
+      break request_on_input_change;
+    }
+    const stop = listenInputChange(element, (e) => {
+      if (element.hasAttribute("data-action")) {
+        dispatchActionRequestedCustomEvent(element, {
+          event: e,
+          requester: element,
+        });
+        return;
+      }
+      const { form } = element;
+      if (!form) {
+        return;
+      }
+      dispatchActionRequestedCustomEvent(form, {
+        event: e,
+        requester: element,
+      });
+    });
+    addTeardown(() => {
+      stop();
     });
   }
 
   execute_on_form_submit: {
-    const form = element.form || element.tagName === "FORM" ? element : null;
-    if (!form) {
+    if (!isForm) {
       break execute_on_form_submit;
     }
+    // We will dispatch "action" when "submit" occurs (code called from.submit() to bypass validation)
+    const form = element;
     const removeListener = addEventListener(form, "submit", (e) => {
       e.preventDefault();
       if (debug) {
@@ -512,12 +626,14 @@ export const installCustomConstraintValidation = (
           event: e,
           method: "rerun",
           requester: form,
-          meta: {},
+          meta: {
+            isSubmit: true,
+          },
         },
       });
       form.dispatchEvent(actionCustomEvent);
     });
-    cleanupCallbackSet.add(() => {
+    addTeardown(() => {
       removeListener();
     });
   }
@@ -531,7 +647,7 @@ export const installCustomConstraintValidation = (
       }
     };
     element.addEventListener("keydown", onkeydown);
-    cleanupCallbackSet.add(() => {
+    addTeardown(() => {
       element.removeEventListener("keydown", onkeydown);
     });
   }
@@ -539,7 +655,11 @@ export const installCustomConstraintValidation = (
   cancel_on_blur: {
     const onblur = () => {
       if (element.value === "") {
-        dispatchCancelCustomEvent({ detail: { reason: "blur_empty" } });
+        dispatchCancelCustomEvent({
+          detail: {
+            reason: "blur_empty",
+          },
+        });
         return;
       }
       // if we have failed constraint, we cancel too
@@ -554,7 +674,7 @@ export const installCustomConstraintValidation = (
       }
     };
     element.addEventListener("blur", onblur);
-    cleanupCallbackSet.add(() => {
+    addTeardown(() => {
       element.removeEventListener("blur", onblur);
     });
   }
@@ -562,22 +682,105 @@ export const installCustomConstraintValidation = (
   return validationInterface;
 };
 
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation
+const wouldClickSubmitForm = (clickEvent) => {
+  if (clickEvent.defaultPrevented) {
+    return false;
+  }
+  const clickTarget = clickEvent.target;
+  const { form } = clickTarget;
+  if (!form) {
+    return false;
+  }
+  const button = clickTarget.closest("button");
+  if (!button) {
+    return false;
+  }
+  const wouldSubmitFormByType =
+    button.type === "submit" || button.type === "image";
+  if (wouldSubmitFormByType) {
+    return true;
+  }
+  if (button.type) {
+    return false;
+  }
+  if (getFirstButtonSubmittingForm(form)) {
+    // an other button is explicitly submitting the form, this one would not submit it
+    return false;
+  }
+  // this is the only button inside the form without type attribute, so it defaults to type="submit"
+  return true;
+};
+const getFirstButtonSubmittingForm = (form) => {
+  return form.querySelector(
+    `button[type="submit"], input[type="submit"], input[type="image"]`,
+  );
+};
+
+const wouldKeydownSubmitForm = (keydownEvent) => {
+  if (keydownEvent.defaultPrevented) {
+    return false;
+  }
+  const keydownTarget = keydownEvent.target;
+  const { form } = keydownTarget;
+  if (!form) {
+    return false;
+  }
+  if (keydownEvent.key !== "Enter") {
+    return false;
+  }
+  const isTextInput =
+    keydownTarget.tagName === "INPUT" || keydownTarget.tagName === "TEXTAREA";
+  if (!isTextInput) {
+    return false;
+  }
+  return true;
+};
 
-const requestSubmitCallbackSet = new Set();
+const dispatchActionRequestedCustomEvent = (
+  fieldOrForm,
+  { actionOrigin = "action_prop", event, requester },
+) => {
+  const actionRequestedCustomEvent = new CustomEvent("actionrequested", {
+    cancelable: true,
+    detail: {
+      actionOrigin,
+      event,
+      requester,
+    },
+  });
+  fieldOrForm.dispatchEvent(actionRequestedCustomEvent);
+};
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation
 const requestSubmit = HTMLFormElement.prototype.requestSubmit;
 HTMLFormElement.prototype.requestSubmit = function (submitter) {
-  let prevented = false;
-  const preventDefault = () => {
-    prevented = true;
-  };
-  for (const requestSubmitCallback of requestSubmitCallbackSet) {
-    requestSubmitCallback(this, { submitter, preventDefault });
-  }
-  if (prevented) {
+  const form = this;
+  const isInstrumented = formInstrumentedWeakSet.has(form);
+  if (!isInstrumented) {
+    requestSubmit.call(form, submitter);
     return;
   }
-  requestSubmit.call(this, submitter);
+  const programmaticEvent = new CustomEvent("programmatic_requestsubmit", {
+    cancelable: true,
+    detail: {
+      submitter,
+    },
+  });
+  dispatchActionRequestedCustomEvent(form, {
+    event: programmaticEvent,
+    requester: submitter,
+  });
+
+  // When all fields are valid calling the native requestSubmit would let browser go through the
+  // standard form validation steps leading to form submission.
+  // We don't want that because we have our own action system to handle forms
+  // If we did that the form submission would happen in parallel of our action system
+  // and because we listen to "submit" event to dispatch "action" event
+  // we would end up with two actions being executed.
+  //
+  // In case we have discrepencies in our implementation compared to the browser standard
+  // this also prevent the native validation message to show up.
+
+  // requestSubmit.call(this, submitter);
 };
 
 // const submit = HTMLFormElement.prototype.submit;