fix(frontend): reset modifier-only saved shortcuts to default (#14245)

* fix: reset modifier-only shortcuts to default

* fix(frontend): replace explicit any casts in shortcuts store tests

Biome's noExplicitAny rule fires on three pre-existing `as any` casts in
shortcuts.test.ts. The lint job checks every file a PR touches, so editing
this test file surfaced them. Replace the casts with a typed helper that
reads dynamic store keys through Record<string, unknown>.

---------

Co-authored-by: Eric Hare <ericrhare@gmail.com>

Author: Cristhianzl

src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/helpers.ts

@@ -47,29 +47,7 @@ export function checkForKeys(keys: string, keyToCompare: string): boolean {
   );
 }
 
-/** Keys that only modify another key and cannot stand alone as a shortcut. */
-const MODIFIER_KEYS = new Set([
-  "cmd",
-  "ctrl",
-  "control",
-  "alt",
-  "option",
-  "shift",
-  "meta",
-  "mod",
-]);
-
-/**
- * True when the recorded combination has no non-modifier key (e.g. "Cmd" or
- * "Ctrl + Shift"). Such a combination can never fire, so it must be rejected.
- */
-export function isModifierOnlyCombination(recorded: string): boolean {
-  const parts = recorded
-    .split("+")
-    .map((part) => part.trim().toLowerCase())
-    .filter(Boolean);
-  return parts.length === 0 || parts.every((part) => MODIFIER_KEYS.has(part));
-}
+export { isModifierOnlyCombination } from "@/utils/shortcuts";
 
 export function normalizeRecordedCombination(recorded: string): string {
   const parts = recorded.split(" ");

src/frontend/src/stores/__tests__/shortcuts.test.ts

@@ -28,6 +28,11 @@ const mockShortcuts = [
   },
 ];
 
+// Reads a shortcut key that is not part of the store type (tests intentionally
+// set arbitrary names to exercise the dynamic-key behavior of the store).
+const getDynamicShortcut = (store: unknown, name: string): unknown =>
+  (store as Record<string, unknown>)[name];
+
 describe("useShortcutsStore", () => {
   beforeEach(() => {
     localStorage.clear();
@@ -163,7 +168,9 @@ describe("useShortcutsStore", () => {
         result.current.updateUniqueShortcut("customShortcut", "mod+custom");
       });
 
-      expect((result.current as any).customShortcut).toBe("mod+custom");
+      expect(getDynamicShortcut(result.current, "customShortcut")).toBe(
+        "mod+custom",
+      );
     });
 
     it("should not affect shortcuts array when updating individual shortcuts", () => {
@@ -190,6 +197,85 @@ describe("useShortcutsStore", () => {
 
       expect(result.current.shortcuts).toEqual(originalShortcuts);
     });
+
+    it("should keep valid custom shortcuts untouched", () => {
+      const saved = [{ name: "Test", display_name: "Test", shortcut: "mod+t" }];
+      localStorage.setItem("langflow-shortcuts", JSON.stringify(saved));
+      const { result } = renderHook(() => useShortcutsStore());
+
+      act(() => {
+        result.current.getShortcutsFromStorage();
+      });
+
+      expect((result.current as unknown as Record<string, string>).Test).toBe(
+        "mod+t",
+      );
+      expect(result.current.shortcuts).toEqual(saved);
+      expect(JSON.parse(localStorage.getItem("langflow-shortcuts")!)).toEqual(
+        saved,
+      );
+    });
+
+    it("should replace a modifier-only saved shortcut with the default for that action", () => {
+      localStorage.setItem(
+        "langflow-shortcuts",
+        JSON.stringify([
+          { name: "Test", display_name: "Test", shortcut: "mod" },
+        ]),
+      );
+      const { result } = renderHook(() => useShortcutsStore());
+
+      act(() => {
+        result.current.getShortcutsFromStorage();
+      });
+
+      expect((result.current as unknown as Record<string, string>).Test).toBe(
+        "t",
+      );
+      expect(result.current.shortcuts).toEqual([
+        { name: "Test", display_name: "Test", shortcut: "t" },
+      ]);
+    });
+
+    it("should persist the sanitized combination back to localStorage", () => {
+      localStorage.setItem(
+        "langflow-shortcuts",
+        JSON.stringify([
+          { name: "Test", display_name: "Test", shortcut: "ctrl+shift" },
+        ]),
+      );
+      const { result } = renderHook(() => useShortcutsStore());
+
+      act(() => {
+        result.current.getShortcutsFromStorage();
+      });
+
+      expect(JSON.parse(localStorage.getItem("langflow-shortcuts")!)).toEqual([
+        { name: "Test", display_name: "Test", shortcut: "t" },
+      ]);
+    });
+
+    it("should drop a modifier-only shortcut that has no default", () => {
+      localStorage.setItem(
+        "langflow-shortcuts",
+        JSON.stringify([
+          { name: "Ghost", display_name: "Ghost", shortcut: "mod" },
+        ]),
+      );
+      const { result } = renderHook(() => useShortcutsStore());
+
+      act(() => {
+        result.current.getShortcutsFromStorage();
+      });
+
+      expect(
+        (result.current as unknown as Record<string, string>).Ghost,
+      ).toBeUndefined();
+      expect(result.current.shortcuts).toEqual([]);
+      expect(JSON.parse(localStorage.getItem("langflow-shortcuts")!)).toEqual(
+        [],
+      );
+    });
   });
 
   describe("state management", () => {
@@ -228,7 +314,7 @@ describe("useShortcutsStore", () => {
         result.current.updateUniqueShortcut("special", "mod+shift+~");
       });
 
-      expect((result.current as any).special).toBe("mod+shift+~");
+      expect(getDynamicShortcut(result.current, "special")).toBe("mod+shift+~");
     });
 
     it("should handle empty string shortcuts", () => {
@@ -238,7 +324,7 @@ describe("useShortcutsStore", () => {
         result.current.updateUniqueShortcut("empty", "");
       });
 
-      expect((result.current as any).empty).toBe("");
+      expect(getDynamicShortcut(result.current, "empty")).toBe("");
     });
 
     it("should handle shortcuts array with duplicate names", () => {

src/frontend/src/stores/shortcuts.ts

@@ -1,8 +1,42 @@
 import { create } from "zustand";
+import { isModifierOnlyCombination } from "@/utils/shortcuts";
 import { toCamelCase } from "@/utils/utils";
 import { defaultShortcuts } from "../constants/constants";
 import type { shortcutsStoreType } from "../types/store";
 
+type SavedShortcut = {
+  name: string;
+  display_name: string;
+  shortcut: string;
+};
+
+/**
+ * Older builds allowed recording modifier-only combinations (e.g. just "mod"),
+ * which can never fire. Restore the default combination for those entries and
+ * drop the ones that no longer map to a known action.
+ */
+function sanitizeSavedShortcuts(saved: SavedShortcut[]): {
+  sanitized: SavedShortcut[];
+  changed: boolean;
+} {
+  let changed = false;
+  const sanitized: SavedShortcut[] = [];
+  saved.forEach((item) => {
+    if (!isModifierOnlyCombination(item.shortcut)) {
+      sanitized.push(item);
+      return;
+    }
+    changed = true;
+    const fallback = defaultShortcuts.find(
+      (defaultItem) => toCamelCase(defaultItem.name) === toCamelCase(item.name),
+    );
+    if (fallback) {
+      sanitized.push({ ...item, shortcut: fallback.shortcut });
+    }
+  });
+  return { sanitized, changed };
+}
+
 export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   shortcuts: defaultShortcuts,
   setShortcuts: (newShortcuts) => {
@@ -42,17 +76,22 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
     });
   },
   getShortcutsFromStorage: () => {
-    if (localStorage.getItem("langflow-shortcuts")) {
-      const savedShortcuts = localStorage.getItem("langflow-shortcuts");
-      const savedArr = JSON.parse(savedShortcuts!);
-      savedArr.forEach(({ name, shortcut }) => {
-        const shortcutName = toCamelCase(name);
-        set({
-          [shortcutName]: shortcut,
-        });
-      });
-      get().setShortcuts(savedArr);
+    const savedShortcuts = localStorage.getItem("langflow-shortcuts");
+    if (!savedShortcuts) {
+      return;
+    }
+    const savedArr: SavedShortcut[] = JSON.parse(savedShortcuts);
+    const { sanitized, changed } = sanitizeSavedShortcuts(savedArr);
+    if (changed) {
+      localStorage.setItem("langflow-shortcuts", JSON.stringify(sanitized));
     }
+    sanitized.forEach(({ name, shortcut }) => {
+      const shortcutName = toCamelCase(name);
+      set({
+        [shortcutName]: shortcut,
+      });
+    });
+    get().setShortcuts(sanitized);
   },
 }));
 

src/frontend/src/utils/shortcuts.ts

@@ -0,0 +1,23 @@
+/** Keys that only modify another key and cannot stand alone as a shortcut. */
+const MODIFIER_KEYS = new Set([
+  "cmd",
+  "ctrl",
+  "control",
+  "alt",
+  "option",
+  "shift",
+  "meta",
+  "mod",
+]);
+
+/**
+ * True when the recorded combination has no non-modifier key (e.g. "Cmd" or
+ * "Ctrl + Shift"). Such a combination can never fire, so it must be rejected.
+ */
+export function isModifierOnlyCombination(recorded: string): boolean {
+  const parts = recorded
+    .split("+")
+    .map((part) => part.trim().toLowerCase())
+    .filter(Boolean);
+  return parts.length === 0 || parts.every((part) => MODIFIER_KEYS.has(part));
+}