fix(subflows): fix pointer events for nested subflow interaction

[waleedlatif1]

Summary

• Set pointer-events: none on subflow outer wrapper so clicks pass through to nested child nodes
• Add pointer-events-auto to ActionBar so buttons are clickable on subflow nodes

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 4, 2026 7:28am

[greptile-apps]

Greptile Summary

This PR fixes pointer-event handling for subflow (loop/parallel) nodes so that clicks correctly reach nested child blocks rather than being swallowed by the subflow wrapper. It does this with two changes: setting pointer-events: none on the outermost SubflowNodeComponent wrapper div and re-enabling pointer-events: auto on the ActionBar container so its buttons remain interactive.

Key points:

• Core fix is sound: disabling pointer events on the outer wrapper lets ReactFlow correctly route clicks to child nodes positioned inside the subflow container.
• ActionBar interactivity restored: adding pointer-events-auto to the ActionBar ensures its buttons can still be clicked even though ancestor elements opt out of pointer events.
• Hover behavior regression: before this change, hovering anywhere on the subflow (including the empty body) would trigger the CSS .group:hover and reveal the ActionBar. With pointer-events: none on the outer wrapper, .group:hover only activates when the cursor lands on a child with explicit pointer-events: auto (header, handles, Start label, child nodes). Hovering over the empty content area of a subflow will not reveal the ActionBar.
• Style inconsistency: action-bar.tsx uses the Tailwind utility pointer-events-auto while subflow-node.tsx uses an inline style={{ pointerEvents: 'none' }} prop for the equivalent declaration; using pointer-events-none class would be consistent.

Confidence Score: 3/5

• Safe to merge with awareness of the ActionBar hover-visibility trade-off on empty subflows.
• The core pointer-event fix is correct and minimal. The pointer-events-auto on the ActionBar is appropriate. The main concern is a UX regression: the ActionBar is no longer revealed by hovering over the empty body area of a subflow, which is a behavioral change from before this PR. Additionally, an inline style is used where a Tailwind class would be consistent with the companion file and project conventions. Neither issue is a runtime error but the hover regression may affect discoverability.
• subflow-node.tsx — review the impact of pointer-events: none on group-hover visibility for empty subflows.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx	Adds pointer-events: none (inline style) to the outermost wrapper div so clicks pass through to nested child nodes; introduces a hover-visibility regression for the ActionBar when hovering over the empty subflow body, and is stylistically inconsistent with the Tailwind class used in the companion action-bar.tsx change.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx	Adds pointer-events-auto Tailwind class to the ActionBar container div so its buttons remain clickable even when ancestor nodes carry pointer-events: none; change is minimal, correct, and follows Tailwind conventions.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["div.group.relative\n(pointer-events: none) ← NEW"]
    A --> B["blockRef div\n(pointer-events: none) — pre-existing"]
    B --> C["ActionBar container\n(pointer-events-auto) ← NEW"]
    C --> D["Action Buttons\n(clickable ✓)"]
    B --> E["Header / drag-handle\n(pointer-events: auto)"]
    B --> F["Content area\n(pointer-events: none)"]
    F --> G["Start label\n(pointer-events: auto)"]
    F --> H["Child ReactFlow nodes\n(pointer-events: auto — own events)"]
    B --> I["Input / Output Handles\n(pointer-events: auto)"]

    style A fill:#ffd7d7,stroke:#c00
    style C fill:#d7ffd7,stroke:#090

Loading

_{Last reviewed commit: c82d738}