fix(blocks): keep the "." shortcut out of fields inside a shadow root [7.x]

Merged
GU
3d ago
+63-2

What

On a live store (not framed), LiveControls turns "." into the "open in Studio" shortcut, and skips it while the shopper types in a field by checking e.target. A keydown from a field inside a shadow root reaches the document retargeted to the shadow host (a plain div), so the check misses it.

Reported case: a store embeds a third-party virtual try-on widget whose modal lives in an open shadow root and asks for the shopper's email. Typing the "." of the email sent the shopper to studio.decocms.com/choose-editor.

Fix

Read the field from e.composedPath()[0] (falls back to e.target). For an open shadow root the composed path starts at the real input. A closed shadow root still hides its fields; nothing on the page can see into one.

Verification

  • New LiveControls.test.tsx runs the real bootstrap script in jsdom: the shortcut still fires outside a field, is skipped in a plain input, and is skipped in an input inside an open shadow root. The shadow-root case fails without the fix and passes with it.
  • bunx vitest run packages/blocks/src/hooks/ ā†’ 48 passed; tsc --noEmit in packages/blocks passes.
  • biome check on LiveControls.tsx reports 2 errors that are already on 7.x (unchanged lines); the new test file is clean.

The same fix for v8 (StudioBridge) is in a separate PR against main.

šŸ¤– Generated with Claude Code

Summary by cubic

Fixes the LiveControls "." shortcut so it no longer triggers when a shopper types "." inside a field that lives in a shadow root, such as a third-party widget's email form. Keydown events from shadow root fields reach the document with the shadow host as their target, so the e.target check missed them and sent shoppers to Studio's editor chooser. The field is now read from e.composedPath()[0] with a fallback to e.target, which resolves to the real input for open shadow roots.