fix: dashboard edit mode widget selection blocked by SchemaRenderer content

[Copilot]

Widgets in the dashboard main area are unselectable in edit mode. Clicks on charts/tables rendered by SchemaRenderer are consumed by interactive child elements (SVG, canvas, table rows) before bubbling to the Card/div selection handler.

Fix — Defense in Depth

Two complementary layers ensure clicks always reach the widget selection handler in design mode:

1. pointer-events-none on content wrappers: Disables chart/table interactivity (tooltips, hover effects) in design mode. Handles most standard HTML elements.

2. Transparent click-capture overlay (absolute inset-0 z-10): Rendered on top of all widget content in design mode. Guarantees clicks reach the widget's onClick handler even if SVG child elements (e.g. Recharts tooltip hitbox <rect>) override inherited pointer-events via explicit SVG attributes.

// Self-contained (metric) widgets
<div className={cn("h-full w-full", designMode && "relative", selectionClasses)} {...designModeProps}>
    <SchemaRenderer schema={componentSchema} className={cn("h-full w-full", designMode && "pointer-events-none")} />
    {designMode && <div className="absolute inset-0 z-10" aria-hidden="true" />}
</div>

// Card-based (chart/table) widgets
<Card className={cn(..., designMode && "relative", selectionClasses)} {...designModeProps}>
    <CardContent className="p-0">
        <div className={cn("h-full w-full", "p-3 sm:p-4 md:p-6", designMode && "pointer-events-none")}>
            <SchemaRenderer schema={componentSchema} />
        </div>
    </CardContent>
    {designMode && <div className="absolute inset-0 z-10" aria-hidden="true" />}
</Card>

• DashboardRenderer.tsx — pointer-events-none on content wrappers + transparent click-capture overlay with relative positioning on widget containers, all gated on designMode
• DashboardRenderer.designMode.test.tsx — Updated mock to forward className and include interactive child element; 9 new tests for pointer-events-none, overlay presence/absence, z-index, relative positioning, and click-to-select
• ROADMAP.md — Phase 9 entry updated

Non-edit mode is unaffected — widgets remain fully interactive with no overlays or pointer-events changes. All 115 dashboard tests pass (11 files).

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Left Pane Unselectable in Dashboard Edit Mode - Comprehensive Investigation Needed</issue_title>
<issue_description>## Problem

In the current Dashboard edit mode, users are unable to select widgets or cards in the left/main view area. Based on the attached screenshot, only the property/config panel on the right remains accessible; the main UI does not react to selection, showing no visible highlights or controls on cards. This blocks property panel linkage and prevents any context-based editing.

Scope of Investigation

• Review dashboard rendering logic in plugin-dashboard or relevant packages.
• Check widget/card selection state propagation (@object-ui/core, @object-ui/react, Zustand store).
• Audit event handler wiring: are onClick, onSelect events correctly hooked on dashboard items?
• Ensure SchemaRenderer and DashboardWidget components correctly pass selection callbacks.
• Evaluate how ListView/PageDesigner achieve selection and highlight.
• Compare store and actions between Dashboard and ListView modes.
• Check dashboard schema definition: Ensure id, type, events fields are present and wired as per @objectstack/spec.
• Review conditional disabling logic and expressions (hidden, disabled) that might block interaction.

Technical Advice

• Focus on dashboard widget selection logic and visual feedback.
• Look for missing event wiring, store state, or selector propagation bugs.
• Do not ignore possibility of stale store, incorrect context provider, or schema mismatch.

Acceptance Criteria

• Selection in left/main dashboard area is possible in edit mode.
• Selected widget/card receives visual highlight.
• Property panel on right reflects the correct widget selection context.
• Selection logic is consistent with ListView/PageDesigner implementations.
• Tests pass for selection and highlighting (run test after changes).

---

Complete investigation and propose fixes. Update roadmap and related issues as appropriate after resolving.

Assignee: hotlong
Labels: bug
Type: Bug</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Left Pane Unselectable in Dashboard Edit Mode - Comprehensive Investigation Needed #814

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
objectui	Ready	Preview, Comment	Feb 24, 2026 2:27am
objectui-demo	Ready	Preview, Comment	Feb 24, 2026 2:27am
objectui-storybook	Ready	Preview, Comment	Feb 24, 2026 2:27am

[hotlong]

@copilot 仔细评估是否已经彻底解决相关问题

[Copilot]

@copilot 仔细评估是否已经彻底解决相关问题

经过仔细评估，发现初始的 pointer-events-none 方案存在不够健壮的问题：SVG 图表元素（如 Recharts 的 tooltip hitbox <rect>）可以通过显式设置 pointer-events 属性来覆盖从父元素继承的 pointer-events: none，导致点击仍被图表内容拦截。

在 commit c813732 中增加了双层防御：

1. pointer-events-none：禁用设计模式下图表/表格的悬浮交互（tooltip、hover 效果）
2. 透明点击捕获遮罩层（absolute inset-0 z-10）：覆盖在所有 widget 内容上方，无论 SVG 子元素如何设置 pointer-events，都能确保点击事件传递到 widget 的 onClick 选择处理器

涵盖范围：

• ✅ 自包含（metric）widgets
• ✅ Card-based（chart/table）widgets
• ✅ 移动端布局（共享 renderWidget 函数）
• ✅ 115 个仪表盘测试全部通过（新增 9 个测试）

[Copilot]

Pull request overview

This PR fixes a critical bug where dashboard widgets were unselectable in edit mode because interactive child elements (charts, tables, SVG elements) intercepted click events before they could reach the widget selection handlers. The solution implements a defense-in-depth approach with two complementary layers: pointer-events-none on content wrappers to disable interactivity, and a transparent click-capture overlay to guarantee clicks reach the handler even when SVG elements override CSS properties.

Changes:

• Added dual-layer click protection (pointer-events-none + transparent overlay) to both self-contained and Card-based widgets in design mode
• Enhanced test mock to forward className and include interactive child elements for more realistic testing
• Added 9 comprehensive tests covering pointer-events-none behavior, overlay presence/absence, positioning, and click-to-select functionality

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
packages/plugin-dashboard/src/DashboardRenderer.tsx	Implemented defense-in-depth click handling: added pointer-events-none to SchemaRenderer content wrappers, transparent absolute inset-0 z-10 overlay, and relative positioning to widget containers, all gated on designMode
packages/plugin-dashboard/src/tests/DashboardRenderer.designMode.test.tsx	Enhanced SchemaRenderer mock to forward className and include interactive button child; added 9 new tests for pointer-events-none, overlay rendering, and click behavior verification
ROADMAP.md	Added Phase 9 documentation describing the fix, defense layers, and test coverage