@headless-tree/core 0.0.0-20250507225212 → 0.0.0-20250508233207

package/CHANGELOG.md

@@ -1,11 +1,17 @@
 # @headless-tree/core
 
-## 0.0.0-20250507225212
+## 0.0.0-20250508233207
 
 ### Minor Changes
 
 - 64d8e2a: add getChildrenWithData method to data loader to support fetching all children of an item at once
 
+### Patch Changes
+
+- 29b2c64: improved key-handling behavior for hotkeys while input elements are focused (#98)
+- da1e757: fixed a bug where alt-tabbing out of browser will break hotkeys feature
+- 29b2c64: added option to completely ignore hotkey events while input elements are focused (`ignoreHotkeysOnInput`) (#98)
+
 ## 1.0.1
 
 ### Patch Changes

package/lib/cjs/features/hotkeys-core/feature.js

@@ -25,16 +25,25 @@ exports.hotkeysCoreFeature = {
     onTreeMount: (tree, element) => {
         const data = tree.getDataRef();
         const keydown = (e) => {
-            var _a, _b, _c, _d;
-            var _e;
+            var _a;
+            var _b;
+            const { ignoreHotkeysOnInputs, onTreeHotkey, hotkeys } = tree.getConfig();
+            if (e.target instanceof HTMLInputElement && ignoreHotkeysOnInputs) {
+                return;
+            }
             const key = e.key.toLowerCase();
-            (_a = (_e = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_e.pressedKeys = new Set());
+            (_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
             const newMatch = !data.current.pressedKeys.has(key);
             data.current.pressedKeys.add(key);
-            const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), tree.getConfig().hotkeys);
+            const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), hotkeys);
+            if (e.target instanceof HTMLInputElement) {
+                // JS respects composite keydowns while input elements are focused, and
+                // doesnt send the associated keyup events with the same key name
+                data.current.pressedKeys.delete(key);
+            }
             if (!hotkeyName)
                 return;
-            const hotkeyConfig = Object.assign(Object.assign({}, tree.getHotkeyPresets()[hotkeyName]), (_b = tree.getConfig().hotkeys) === null || _b === void 0 ? void 0 : _b[hotkeyName]);
+            const hotkeyConfig = Object.assign(Object.assign({}, tree.getHotkeyPresets()[hotkeyName]), hotkeys === null || hotkeys === void 0 ? void 0 : hotkeys[hotkeyName]);
             if (!hotkeyConfig)
                 return;
             if (!hotkeyConfig.allowWhenInputFocused &&
@@ -45,7 +54,7 @@ exports.hotkeysCoreFeature = {
             if (hotkeyConfig.preventDefault)
                 e.preventDefault();
             hotkeyConfig.handler(e, tree);
-            (_d = (_c = tree.getConfig()).onTreeHotkey) === null || _d === void 0 ? void 0 : _d.call(_c, hotkeyName, e);
+            onTreeHotkey === null || onTreeHotkey === void 0 ? void 0 : onTreeHotkey(hotkeyName, e);
         };
         const keyup = (e) => {
             var _a;
@@ -53,13 +62,18 @@ exports.hotkeysCoreFeature = {
             (_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
             data.current.pressedKeys.delete(e.key.toLowerCase());
         };
+        const reset = () => {
+            data.current.pressedKeys = new Set();
+        };
         // keyup is registered on document, because some hotkeys shift
         // the focus away from the tree (i.e. search)
         // and then we wouldn't get the keyup event anymore
         element.addEventListener("keydown", keydown);
         document.addEventListener("keyup", keyup);
+        window.addEventListener("focus", reset);
         data.current.keydownHandler = keydown;
         data.current.keyupHandler = keyup;
+        data.current.resetHandler = reset;
     },
     onTreeUnmount: (tree, element) => {
         const data = tree.getDataRef();
@@ -71,5 +85,9 @@ exports.hotkeysCoreFeature = {
             element.removeEventListener("keydown", data.current.keydownHandler);
             delete data.current.keydownHandler;
         }
+        if (data.current.resetHandler) {
+            window.removeEventListener("focus", data.current.resetHandler);
+            delete data.current.resetHandler;
+        }
     },
 };

package/lib/cjs/features/hotkeys-core/types.d.ts

@@ -10,6 +10,7 @@ export interface HotkeyConfig<T> {
 export interface HotkeysCoreDataRef {
     keydownHandler?: (e: KeyboardEvent) => void;
     keyupHandler?: (e: KeyboardEvent) => void;
+    resetHandler?: (e: FocusEvent) => void;
     pressedKeys: Set<string>;
 }
 export type HotkeysCoreFeatureDef<T> = {
@@ -17,6 +18,8 @@ export type HotkeysCoreFeatureDef<T> = {
     config: {
         hotkeys?: CustomHotkeysConfig<T>;
         onTreeHotkey?: (name: string, e: KeyboardEvent) => void;
+        /** Do not handle key inputs while an HTML input element is focused */
+        ignoreHotkeysOnInputs?: boolean;
     };
     treeInstance: {};
     itemInstance: {};

package/lib/esm/features/hotkeys-core/feature.js

@@ -22,16 +22,25 @@ export const hotkeysCoreFeature = {
     onTreeMount: (tree, element) => {
         const data = tree.getDataRef();
         const keydown = (e) => {
-            var _a, _b, _c, _d;
-            var _e;
+            var _a;
+            var _b;
+            const { ignoreHotkeysOnInputs, onTreeHotkey, hotkeys } = tree.getConfig();
+            if (e.target instanceof HTMLInputElement && ignoreHotkeysOnInputs) {
+                return;
+            }
             const key = e.key.toLowerCase();
-            (_a = (_e = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_e.pressedKeys = new Set());
+            (_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
             const newMatch = !data.current.pressedKeys.has(key);
             data.current.pressedKeys.add(key);
-            const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), tree.getConfig().hotkeys);
+            const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), hotkeys);
+            if (e.target instanceof HTMLInputElement) {
+                // JS respects composite keydowns while input elements are focused, and
+                // doesnt send the associated keyup events with the same key name
+                data.current.pressedKeys.delete(key);
+            }
             if (!hotkeyName)
                 return;
-            const hotkeyConfig = Object.assign(Object.assign({}, tree.getHotkeyPresets()[hotkeyName]), (_b = tree.getConfig().hotkeys) === null || _b === void 0 ? void 0 : _b[hotkeyName]);
+            const hotkeyConfig = Object.assign(Object.assign({}, tree.getHotkeyPresets()[hotkeyName]), hotkeys === null || hotkeys === void 0 ? void 0 : hotkeys[hotkeyName]);
             if (!hotkeyConfig)
                 return;
             if (!hotkeyConfig.allowWhenInputFocused &&
@@ -42,7 +51,7 @@ export const hotkeysCoreFeature = {
             if (hotkeyConfig.preventDefault)
                 e.preventDefault();
             hotkeyConfig.handler(e, tree);
-            (_d = (_c = tree.getConfig()).onTreeHotkey) === null || _d === void 0 ? void 0 : _d.call(_c, hotkeyName, e);
+            onTreeHotkey === null || onTreeHotkey === void 0 ? void 0 : onTreeHotkey(hotkeyName, e);
         };
         const keyup = (e) => {
             var _a;
@@ -50,13 +59,18 @@ export const hotkeysCoreFeature = {
             (_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
             data.current.pressedKeys.delete(e.key.toLowerCase());
         };
+        const reset = () => {
+            data.current.pressedKeys = new Set();
+        };
         // keyup is registered on document, because some hotkeys shift
         // the focus away from the tree (i.e. search)
         // and then we wouldn't get the keyup event anymore
         element.addEventListener("keydown", keydown);
         document.addEventListener("keyup", keyup);
+        window.addEventListener("focus", reset);
         data.current.keydownHandler = keydown;
         data.current.keyupHandler = keyup;
+        data.current.resetHandler = reset;
     },
     onTreeUnmount: (tree, element) => {
         const data = tree.getDataRef();
@@ -68,5 +82,9 @@ export const hotkeysCoreFeature = {
             element.removeEventListener("keydown", data.current.keydownHandler);
             delete data.current.keydownHandler;
         }
+        if (data.current.resetHandler) {
+            window.removeEventListener("focus", data.current.resetHandler);
+            delete data.current.resetHandler;
+        }
     },
 };

package/lib/esm/features/hotkeys-core/types.d.ts

@@ -10,6 +10,7 @@ export interface HotkeyConfig<T> {
 export interface HotkeysCoreDataRef {
     keydownHandler?: (e: KeyboardEvent) => void;
     keyupHandler?: (e: KeyboardEvent) => void;
+    resetHandler?: (e: FocusEvent) => void;
     pressedKeys: Set<string>;
 }
 export type HotkeysCoreFeatureDef<T> = {
@@ -17,6 +18,8 @@ export type HotkeysCoreFeatureDef<T> = {
     config: {
         hotkeys?: CustomHotkeysConfig<T>;
         onTreeHotkey?: (name: string, e: KeyboardEvent) => void;
+        /** Do not handle key inputs while an HTML input element is focused */
+        ignoreHotkeysOnInputs?: boolean;
     };
     treeInstance: {};
     itemInstance: {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.0-20250507225212",
+  "version": "0.0.0-20250508233207",
   "type": "module",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",

package/src/features/async-data-loader/async-data-loader.spec.ts

@@ -126,5 +126,49 @@ describe("core-feature/selections", () => {
     });
   });
 
-  // TODO - add tests for getChildrenWithData
+  describe("getChildrenWithData", () => {
+    const getChildrenWithData = vi.fn(async (id) => [
+      { id: `${id}1`, data: `${id}1-data` },
+      { id: `${id}2`, data: `${id}2-data` },
+    ]);
+    const getItem = vi.fn();
+    const suiteTree = tree.with({
+      dataLoader: { getItem, getChildrenWithData },
+    });
+    suiteTree.resetBeforeEach();
+
+    it("loads children with data", async () => {
+      getChildrenWithData.mockClear();
+      suiteTree.do.selectItem("x12");
+      await suiteTree.resolveAsyncVisibleItems();
+      expect(getChildrenWithData).toHaveBeenCalledWith("x12");
+      suiteTree.expect.hasChildren("x12", ["x121", "x122"]);
+      expect(suiteTree.item("x121").getItemData()).toBe("x121-data");
+      expect(suiteTree.item("x122").getItemData()).toBe("x122-data");
+    });
+
+    it.skip("invalidates children and reloads with data", async () => {
+      await suiteTree.resolveAsyncVisibleItems();
+      suiteTree.item("x").invalidateChildrenIds();
+      getChildrenWithData.mockResolvedValueOnce([
+        { id: "new1", data: "new1-data" },
+        { id: "new2", data: "new2-data" },
+      ]);
+      getChildrenWithData.mockClear();
+      await suiteTree.resolveAsyncVisibleItems();
+      expect(getChildrenWithData).toHaveBeenCalledTimes(1);
+      suiteTree.expect.hasChildren("x", ["new1", "new2"]);
+      expect(suiteTree.item("new1").getItemData()).toBe("new1-data");
+      expect(suiteTree.item("new2").getItemData()).toBe("new2-data");
+    });
+
+    it("does not call getChildrenWithData twice unnecessarily", async () => {
+      await suiteTree.resolveAsyncVisibleItems();
+      getChildrenWithData.mockClear();
+      suiteTree.item("x").invalidateChildrenIds();
+      await suiteTree.resolveAsyncVisibleItems();
+      suiteTree.expect.hasChildren("x", ["x1", "x2"]);
+      expect(getChildrenWithData).toHaveBeenCalledTimes(1);
+    });
+  });
 });

package/src/features/hotkeys-core/feature.ts

@@ -45,6 +45,11 @@ export const hotkeysCoreFeature: FeatureImplementation = {
   onTreeMount: (tree, element) => {
     const data = tree.getDataRef<HotkeysCoreDataRef>();
     const keydown = (e: KeyboardEvent) => {
+      const { ignoreHotkeysOnInputs, onTreeHotkey, hotkeys } = tree.getConfig();
+      if (e.target instanceof HTMLInputElement && ignoreHotkeysOnInputs) {
+        return;
+      }
+
       const key = e.key.toLowerCase();
       data.current.pressedKeys ??= new Set();
       const newMatch = !data.current.pressedKeys.has(key);
@@ -54,14 +59,20 @@ export const hotkeysCoreFeature: FeatureImplementation = {
         data.current.pressedKeys,
         tree as any,
         tree.getHotkeyPresets(),
-        tree.getConfig().hotkeys as HotkeysConfig<any>,
+        hotkeys as HotkeysConfig<any>,
       );
 
+      if (e.target instanceof HTMLInputElement) {
+        // JS respects composite keydowns while input elements are focused, and
+        // doesnt send the associated keyup events with the same key name
+        data.current.pressedKeys.delete(key);
+      }
+
       if (!hotkeyName) return;
 
       const hotkeyConfig: HotkeyConfig<any> = {
         ...tree.getHotkeyPresets()[hotkeyName],
-        ...tree.getConfig().hotkeys?.[hotkeyName],
+        ...hotkeys?.[hotkeyName],
       };
 
       if (!hotkeyConfig) return;
@@ -74,7 +85,7 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       if (hotkeyConfig.preventDefault) e.preventDefault();
 
       hotkeyConfig.handler(e, tree as any);
-      tree.getConfig().onTreeHotkey?.(hotkeyName, e);
+      onTreeHotkey?.(hotkeyName, e);
     };
 
     const keyup = (e: KeyboardEvent) => {
@@ -82,13 +93,19 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       data.current.pressedKeys.delete(e.key.toLowerCase());
     };
 
+    const reset = () => {
+      data.current.pressedKeys = new Set();
+    };
+
     // keyup is registered on document, because some hotkeys shift
     // the focus away from the tree (i.e. search)
     // and then we wouldn't get the keyup event anymore
     element.addEventListener("keydown", keydown);
     document.addEventListener("keyup", keyup);
+    window.addEventListener("focus", reset);
     data.current.keydownHandler = keydown;
     data.current.keyupHandler = keyup;
+    data.current.resetHandler = reset;
   },
 
   onTreeUnmount: (tree, element) => {
@@ -101,5 +118,9 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       element.removeEventListener("keydown", data.current.keydownHandler);
       delete data.current.keydownHandler;
     }
+    if (data.current.resetHandler) {
+      window.removeEventListener("focus", data.current.resetHandler);
+      delete data.current.resetHandler;
+    }
   },
 };

package/src/features/hotkeys-core/types.ts

@@ -12,6 +12,7 @@ export interface HotkeyConfig<T> {
 export interface HotkeysCoreDataRef {
   keydownHandler?: (e: KeyboardEvent) => void;
   keyupHandler?: (e: KeyboardEvent) => void;
+  resetHandler?: (e: FocusEvent) => void;
   pressedKeys: Set<string>;
 }
 
@@ -20,6 +21,9 @@ export type HotkeysCoreFeatureDef<T> = {
   config: {
     hotkeys?: CustomHotkeysConfig<T>;
     onTreeHotkey?: (name: string, e: KeyboardEvent) => void;
+
+    /** Do not handle key inputs while an HTML input element is focused */
+    ignoreHotkeysOnInputs?: boolean;
   };
   treeInstance: {};
   itemInstance: {};