Vercel Toolbar keyboard shortcuts (e.g. Comment = c) hijack keystrokes inside shadow-DOM text inputs

Feedback
1

Summary

The Vercel Toolbar / Live Feedback keyboard-shortcut handler swallows single-key shortcuts (e.g. c for Comment) when the user is typing in an <input>/<textarea>/contenteditable that lives inside a shadow DOM.
The handler’s “are we in a text field?” guard uses target.closest("input,textarea,[contenteditable]"), which cannot pierce shadow boundaries, so it incorrectly fires the shortcut and preventDefault()s the keystroke.

Net effect: in such a field you cannot type the letter c (lowercase), while Shift+C and every other key work — because only c is bound to a shortcut.

Steps to reproduce

  1. Open a deployment with the Vercel Toolbar enabled, while signed in to Vercel.
  2. Interact with any widget that renders a text input inside a shadow DOM. We hit this with the Usersnap feedback widget (<us-widget>, a web component with a shadow root), but any shadow-DOM input reproduces it.
  3. Focus the input and type a word containing c (e.g. “since”).

Expected: the c character is entered.
Actual: c is swallowed (Comment shortcut fires / is preventDefault’d); uppercase C and other letters type fine.

Root cause

In vercel.live/_next-live/feedback/instrument.*.js, the keydown handler guards against firing inside text fields like this:

if (r.key && (f || !d.closest("input,textarea,[contenteditable]"))) {
  var h = Q3(r);
  (a = e[h]) && (o.preventDefault(), /* ... */);
}

d is the event target. When the focused input is inside a shadow DOM, the event is retargeted to the shadow host in the light DOM (in our case <us-widget>). d.closest(...) then walks the light-DOM ancestors of the host and never sees the real <textarea> inside the shadow tree → returns null → the guard passes → the shortcut fires and the keystroke is blocked.

Suggested fix

Resolve the truly focused element across shadow boundaries instead of relying on target.closest(). For example, use the composed path:

const path = o.composedPath?.() ?? [];
const inEditable = path.some(
  (el) => el instanceof Element &&
    (el.matches?.("input,textarea,[contenteditable]"))
);
if (r.key && (f || !inEditable)) { /* ... */ }

or walk active elements through nested shadow roots (document.activeElement → el.shadowRoot?.activeElement …) before deciding to fire a shortcut.

Workaround

Vercel Toolbar → Preferences → Keyboard shortcuts → Comment → remove the c binding. After that, the field accepts c normally.

Environment

  • Vercel Toolbar / Live Feedback / Vercel Extension (_next-live/feedback/instrument.js)
  • Chrome on macOS
  • Affected input: Usersnap widget (<us-widget> web component, shadow DOM)