Skip to content

fix(slash): handle menu clicks inside shadow DOM#161

Open
Johnson-zq wants to merge 1 commit into
floatboatai:mainfrom
Johnson-zq:fix/slash-shadow-dom-click
Open

fix(slash): handle menu clicks inside shadow DOM#161
Johnson-zq wants to merge 1 commit into
floatboatai:mainfrom
Johnson-zq:fix/slash-shadow-dom-click

Conversation

@Johnson-zq

@Johnson-zq Johnson-zq commented Jul 15, 2026

Copy link
Copy Markdown

Summary / 摘要

Fix slash menu item interactions when createSlashMenuUI is mounted inside a ShadowRoot.

Motivation / 背景与动机

The document-level outside-click handler used event.target together with root.contains(target).

When a composed event crosses a Shadow DOM boundary, event.target is retargeted to the shadow host for listeners outside the shadow tree. As a result, clicking a slash menu item could be incorrectly treated as an outside click, dismissing the menu before the command was confirmed.

This change uses the event's composed propagation path so menu-internal interactions are detected correctly in both light DOM and Shadow DOM.

  • Issue: N/A
  • Roadmap (docs/ROADMAP.md): N/A
  • OpenSpec change: N/A — this is a focused bug fix with no new capability or public API change.

Changes / 变更内容

  • packages/plugin-slash:
    • Replace the event.target containment check with event.composedPath().
    • Preserve the existing outside-click dismissal behavior for regular DOM usage.
    • Add a Shadow DOM regression test that mounts the menu inside a real ShadowRoot.
    • Verify that mousedown does not dismiss the menu before the item click handler confirms the command.
  • packages/core: No changes.
  • apps/electron-demo: No code changes.
  • openspec/: Not required for this bug fix.

Testing / 测试

  • pnpm exec vitest run packages/plugin-slash/test/menu-ui.test.ts --reporter=verbose
  • pnpm typecheck
  • pnpm test
  • pnpm --filter @floatboat/nexus-plugin-slash build
  • pnpm build
  • Added a regression test for menu interaction inside a ShadowRoot.
  • Manually verified the standard slash menu flow in the Electron demo:
    • Opening the menu with /
    • Selecting a command with the mouse
    • Confirming a command with Enter
    • Dismissing the menu with Escape
    • Dismissing the menu by clicking outside

Compliance / 合规自检

  • CLA signed — confirmed by CLA Assistant.
  • AI disclosure: the functional code in this PR is not primarily generated by AI.
    AI-assisted notes: AI assistance was used to help inspect the Shadow DOM event propagation path and draft the initial regression-test approach. I reviewed the final changes line by line, verified the event-retargeting behavior, understood the use of Event.composedPath(), and ran the tests locally.
  • New dependencies: None.
  • No build artifacts committed (dist/, dist-electron/, or compiled .js files).
  • No secrets, .env files, credentials, or personal vault data committed.

Checklist / 自检清单

  • Title follows Conventional Commits.
  • Public API changes update package README / types — N/A, no public API changes.
  • Touched live-preview-table.ts — N/A, this file was not modified.
  • New capability / breaking change requires OpenSpec — N/A, this is a bug fix.
  • Change aligns with the project scope in GOVERNANCE.md §4.

Screenshots / Recordings · 截图或录屏

N/A — this change fixes event handling without changing the visual appearance. The Shadow DOM behavior is covered by the new regression test, and the standard light-DOM interaction was manually checked in the Electron demo.

@CLAassistant

CLAassistant commented Jul 15, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants