@jsenv/navi 0.29.490 → 0.29.491

package/dist/dev/jsenv_navi.js

@@ -15804,11 +15804,19 @@ const addInputEffect = (
       (e) => {
         onEvent(e, { skipDebounce: true });
       },
-      { getState, changeOnEnter: true },
+      { getState },
     );
     addTeardown(() => {
       stop();
     });
+    // What the user gave up on (addInputCancel) does not go out later either.
+    const oncancel = () => {
+      clearTimeout(debounceTimeout);
+    };
+    input.addEventListener("navi_cancel", oncancel);
+    addTeardown(() => {
+      input.removeEventListener("navi_cancel", oncancel);
+    });
   } else {
     onEvent = (e) => {
       clearTimeout(timeout);
@@ -15891,36 +15899,38 @@ const addInputEffect = (
   return teardown;
 };
 
-const listenInputStateChange = (
-  input,
-  callback,
-  { getState, changeOnEnter },
-) => {
+const listenInputStateChange = (input, callback, { getState }) => {
   const [teardown, addTeardown] = createPubSub();
 
+  // Enter commits on its own keydown, not through the "change" the browser
+  // fires after it: a field answering Enter for itself takes the key from its
+  // <form> (keyDownDefaultOnInput in control_hooks.jsx), and the browser then
+  // holds that "change" until the blur. Committed only when the user typed
+  // since the last commit, which is when the browser would fire one.
+  let typedSinceCommit = false;
+  // A "change" carrying this value was answered by a key already: committed by
+  // Enter, or given up by Escape.
   let stateAtInteraction;
-  const oninput = () => {
+  const commit = (e) => {
+    typedSinceCommit = false;
+    callback(e);
+  };
+  const oninput = (e) => {
     stateAtInteraction = undefined;
+    if (e.isTrusted) {
+      typedSinceCommit = true;
+    }
   };
   const onkeydown = (e) => {
     if (e.key === "Enter") {
-      /**
-       * Browser trigger a "change" event right after the enter is pressed
-       * if the input value has changed.
-       * We need to prevent the next change event otherwise we would request action twice
-       */
       stateAtInteraction = getState();
-      if (changeOnEnter) {
-        onchange(e);
+      if (typedSinceCommit) {
+        commit(e);
       }
+      return;
     }
     if (e.key === "Escape") {
-      /**
-       * Browser trigger a "change" event right after the escape is pressed
-       * if the input value has changed.
-       * We need to prevent the next change event otherwise we would request action when
-       * we actually want to cancel
-       */
+      typedSinceCommit = false;
       stateAtInteraction = getState();
     }
   };
@@ -15929,7 +15939,7 @@ const listenInputStateChange = (
       stateAtInteraction = undefined;
       return;
     }
-    callback(e);
+    commit(e);
   };
   input.addEventListener("input", oninput);
   // Capture: the guard is set before the control reacts to the key. Its
@@ -51342,26 +51352,22 @@ const useControlProps = (props, {
       }
 
       // A field with an action of its own has Enter answered already: the
-      // input effect (input_effect.js) commits it — through the change Enter
-      // fires, or on the keydown itself under actionDebounce — and an action
+      // input effect (input_effect.js) commits it on the keydown, and an action
       // run on every keystroke has nothing left to commit. --navi-send would
       // run that same action a second time. Nothing answers it under
       // actionEvent="custom", where the field's caller does.
       const enterAnsweredByInputEffect = Boolean(actionDebounce) || props.action !== undefined && actionEvent !== "custom";
       const keyDownDefaultOnInput = e => {
         if (e.key === "Enter") {
-          if (props.enterSendsNothing) {
-            // Left to the browser, so its own Enter still happens (a datalist
-            // choice) — except inside a <form>, where that Enter is the form's
-            // implicit submission.
+          if (props.enterSendsNothing || enterAnsweredByInputEffect) {
+            // Nothing around the field hears it. Left to the browser, so its
+            // own Enter still happens (a datalist choice) — except inside a
+            // <form>, where that Enter is the form's implicit submission.
             if (ref.current.form) {
               e.preventDefault();
             }
             return null;
           }
-          if (enterAnsweredByInputEffect) {
-            return null;
-          }
           return enterToSend(e);
         }
         return keyDownDefault(e);