@jsenv/navi 0.29.456 → 0.29.457

package/dist/jsenv_navi.js

@@ -24292,10 +24292,9 @@ const useKeyboardShortcuts = (
     );
     shortcut.action = useAction(shortcut.action);
   }
-  const onKeyDown = createOnKeyDownForShortcutArray(
-    shortcuts,
-    shortcutActionIsBusyRef,
-  );
+  const onKeyDown = createOnKeyDownForShortcutArray(shortcuts, {
+    busyRef: shortcutActionIsBusyRef,
+  });
   useEffect(() => {
     const element = elementRef.current;
     if (!element) {
@@ -24313,7 +24312,10 @@ const useKeyboardShortcuts = (
   }, [shortcutDeps]);
 };
 
-const createOnKeyDownForShortcutArray = (shortcuts, busyRef) => {
+const createOnKeyDownForShortcutArray = (
+  shortcuts,
+  { busyRef, ownsTarget } = {},
+) => {
   const shortcutsCopy = [];
   for (const shortcutCandidate of shortcuts) {
     shortcutsCopy.push({
@@ -24359,10 +24361,20 @@ const createOnKeyDownForShortcutArray = (shortcuts, busyRef) => {
   }
 
   return (keyboardEvent) => {
-    return applyKeyboardShortcuts(shortcutsCopy, keyboardEvent);
+    return applyKeyboardShortcuts(shortcutsCopy, keyboardEvent, {
+      ownsTarget,
+    });
   };
 };
-const createOnKeyDownForShortcuts = (shortcuts) => {
+/**
+ * @param {object} shortcuts
+ * @param {object} [options]
+ * @param {(target: Element) => boolean} [options.ownsTarget] Whether a
+ *   descendant the key was pressed in is one the shortcuts speak for, so its
+ *   native behavior (the caret, typing) is theirs to take. Without it only the
+ *   listening element itself is; a descendant keeps every key it has a use for.
+ */
+const createOnKeyDownForShortcuts = (shortcuts, { ownsTarget } = {}) => {
   const shortcutsArray = [];
   for (const key of Object.keys(shortcuts)) {
     const value = shortcuts[key];
@@ -24374,16 +24386,18 @@ const createOnKeyDownForShortcuts = (shortcuts) => {
     }
     shortcutsArray.push(shortcut);
   }
-  return createOnKeyDownForShortcutArray(shortcutsArray);
+  return createOnKeyDownForShortcutArray(shortcutsArray, { ownsTarget });
 };
 
-const applyKeyboardShortcuts = (shortcuts, keyboardEvent) => {
+const applyKeyboardShortcuts = (shortcuts, keyboardEvent, { ownsTarget }) => {
   const currentTarget = keyboardEvent.currentTarget;
   const target = keyboardEvent.target;
   let canIntercept;
   if (target === currentTarget) {
     // the event occurs on the element itself so we are sure we won't interfere with native behaviors of child elements
     canIntercept = true;
+  } else if (ownsTarget && ownsTarget(target)) {
+    canIntercept = true;
   } else {
     // we need to check if the default action is something that we can allow to be intercepted
     const defaultAction = getKeyboardEventDefaultAction(keyboardEvent);
@@ -24601,6 +24615,17 @@ const isSameKey = (browserEventKey, key) => {
  * knows what "ctrl+backspace" means, which keys a control may take without
  * swallowing what the browser owed them, and which it may not.
  *
+ * The control's own element is the exception to that last part. `interactions`
+ * are set up on a field's outer box while the key goes down in its `<input>`,
+ * and that field is the control the declaration speaks for: an ArrowUp declared
+ * on a text field is the field saying what ArrowUp does there, not a container
+ * taking the caret from a field inside it. A field inside a box that declares
+ * keys for something else (a row, a list) keeps every key it has a use for.
+ *
+ * A declared key that matches takes the key: its default does not happen as
+ * well, whether the gate lets the interaction through or refuses it and says
+ * why — the same as a number field's arrows.
+ *
  * The interaction is dispatched under its full name, colon included, so
  * `findEvent(event, "keyboard:ctrl+backspace")` gets back to it — the shortcut
  * that asked is what the action wants to know, not that a key went down.
@@ -24617,9 +24642,12 @@ defineInteractionDetector({
     for (const type of types) {
       shortcuts[type.slice(KEYBOARD_PREFIX.length)] = (keyboardEvent) => {
         trigger(type, keyboardEvent);
+        keyboardEvent.preventDefault();
       };
     }
-    const onKeyDown = createOnKeyDownForShortcuts(shortcuts);
+    const onKeyDown = createOnKeyDownForShortcuts(shortcuts, {
+      ownsTarget: (target) => target === findNearestControlHost(element),
+    });
     element.addEventListener("keydown", onKeyDown);
     return () => {
       element.removeEventListener("keydown", onKeyDown);