Skip to content

SidebarProvider's global Cmd/Ctrl+B keydown handler hijacks the browser's Bold shortcut inside text fields, missing the isTyping() guard used elsewhere in this repo #8305

Description

@JSONbored

Context

packages/loopover-ui-kit/src/components/sidebar.tsx's SidebarProvider registers a document-level keydown listener (lines 104-117) that toggles the sidebar on Cmd/Ctrl+B:

React.useEffect(() => {
  const handleKeyDown = (event: KeyboardEvent) => {
    if (
      event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
      (event.metaKey || event.ctrlKey)
    ) {
      event.preventDefault();
      toggleSidebar();
    }
  };
  window.addEventListener("keydown", handleKeyDown);
  return () => window.removeEventListener("keydown", handleKeyDown);
}, [toggleSidebar]);

This handler fires regardless of what element currently has focus — including a text <input>, <textarea>, or contenteditable element. Since Cmd/Ctrl+B is the browser/OS-native "Bold" shortcut inside any editable text field, this handler's unconditional event.preventDefault() hijacks that native behavior and toggles the sidebar instead, every time, anywhere on the page a SidebarProvider is mounted.

This exact class of bug already has a fix precedent live in this same repo, twice: apps/loopover-ui/src/components/site/keyboard-shortcuts.tsx (lines 80-84) and apps/loopover-ui/src/components/site/app-shell.tsx (lines 129-131) both guard their own global keydown handlers with an isTyping()-style check before acting:

const isTyping = (el: EventTarget | null) => {
  if (!(el instanceof HTMLElement)) return false;
  const tag = el.tagName;
  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable;
};

sidebar.tsx's handler has no equivalent guard.

Requirements

  • Add the same isTyping(event.target)-style guard (checking tagName === "INPUT" | "TEXTAREA" | "SELECT" or isContentEditable) to SidebarProvider's handleKeyDown, and return early (without calling toggleSidebar() or preventDefault()) when the event target is a form field or contenteditable element — mirroring keyboard-shortcuts.tsx's isTyping helper exactly, not a differently-shaped check.
  • Keep the existing metaKey/ctrlKey + key === SIDEBAR_KEYBOARD_SHORTCUT condition unchanged for the non-typing case.
  • Do not change toggleSidebar's own behavior, the cookie-persistence logic, or any other part of SidebarProvider.

Deliverables

  • isTyping-equivalent guard added to SidebarProvider's handleKeyDown in packages/loopover-ui-kit/src/components/sidebar.tsx
  • A regression test (new sidebar.test.tsx — none exists today) asserting: (a) Cmd/Ctrl+B while focus is on a plain <div>/document.body toggles the sidebar, and (b) Cmd/Ctrl+B while focus is on an <input> / <textarea> / a contentEditable element does not toggle the sidebar and does not call preventDefault()

Test Coverage Requirements

packages/loopover-ui-kit is not in the root vitest.config.ts's coverage.include and is not Codecov-gated — still add the regression test above (this package's own suite must run and pass per its vitest.config.ts's stated acceptance bar).

Expected Outcome

Typing "b" while holding Cmd/Ctrl inside any text input, textarea, or contenteditable element on a page using SidebarProvider no longer toggles the sidebar or blocks the browser's native Bold shortcut — matching the guard already applied to the other two global keyboard-shortcut handlers in this repo.

Links & Resources

  • apps/loopover-ui/src/components/site/keyboard-shortcuts.tsx:80-84 (the isTyping helper to mirror)
  • apps/loopover-ui/src/components/site/app-shell.tsx:129-131 (a second, independent instance of the same guard)
  • packages/loopover-ui-kit/src/components/sidebar.tsx:104-117 (the ungated handler)

Metadata

Metadata

Assignees

No one assigned

    Labels

    gittensor:bugGittensor-scored bug fix — scores a 0.05x multiplier.help wantedExtra attention is needed

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions