New OSS::ContextMenu::Panel component #626

aprentout · 2026-01-26T14:01:04Z

What does this PR do?

Related to: #DRA-4463

What are the observable changes?

New ContextMenu::Panel component, which displays a context menu panel anchored to a specified reference target. It supports nested submenus, customizable placement, and offset options. The panel can trigger actions when menu items are selected and handle mouse leave events.
Furthermore each row can be customized by passing a component in the rowRenderer

Enregistrement.de.l.ecran.2026-01-28.a.10.58.09.mov

Good PR checklist

Note

Medium Risk
Adds a new floating/portal-based context menu and updates shared attachDropdown behavior (offset typing + maxHeight fix), which could affect positioning/styling of other dropdowns relying on this utility.

Overview
Introduces a new OSS::ContextMenu::Panel component that renders a floating, anchored context-menu panel (via attachDropdown) and supports nested submenus, click-outside handling, scroll-driven submenu closing, and optional per-row custom rendering via rowRenderer.

Extends attach-dropdown to accept object offsets ({ mainAxis, crossAxis }) and fixes an incorrect maxHeight style assignment; adds new styling for the context menu, Storybook docs, a dummy-app usage example, and integration tests covering positioning, offsets, submenu behavior, custom row rendering, and mouse-leave callbacks.

^{Written by Cursor Bugbot for commit ef65320. This will update automatically on new commits. Configure here.}

linear · 2026-01-26T14:01:08Z

DRA-4463 [oss-components][ContextMenu] New OSS::ContextMenu::Panel component

aprentout · 2026-01-28T10:09:26Z

addon/components/o-s-s/context-menu/panel.ts

+export type ContextMenuItem = {
+  items?: ContextMenuItem[];
+  groupKey?: string;
+  rowRenderer?: ReturnType<typeof ensureSafeComponent>; // move to Component


ensureSafeComponent returns deprecation warning, should we replace by using direct class import like recommended by ember ?
https://github.com/embroider-build/embroider/blob/main/docs/replacing-component-helper.md#when-youre-passing-a-component-to-someone-else

addon/components/o-s-s/context-menu/panel.ts

addon/components/o-s-s/context-menu/panel.hbs

nathalieArnoux · 2026-01-29T10:10:49Z

tests/dummy/app/components/panel/example-row.hbs

@@ -0,0 +1,4 @@
+<div>
+  🦆 -


tests/dummy/app/controllers/input.ts

cursor · 2026-01-29T10:17:57Z

addon/components/o-s-s/context-menu/panel.ts

+  willDestroy(): void {
+    super.willDestroy();
+    this.currentPanel.querySelector('.oss-scrollable-panel-content')?.removeEventListener('scroll', this.onScrollbound);
+  }


Missing cleanup call causes memory leak on destroy

High Severity

The cleanupDrodpownAutoplacement function returned by attachDropdown is stored but never invoked in willDestroy. The attachDropdown utility returns a cleanup function from floating-ui's autoUpdate that needs to be called to stop position listeners. Without this cleanup call, event listeners continue running and references are never released after the component is destroyed, causing a memory leak each time a context menu panel is opened and closed.

Additional Locations (1)

addon/components/o-s-s/context-menu/panel.ts#L44-L45

cursor · 2026-01-29T10:17:57Z

addon/components/o-s-s/context-menu/panel.ts

+  @action
+  willDestroy(): void {
+    super.willDestroy();
+    this.currentPanel.querySelector('.oss-scrollable-panel-content')?.removeEventListener('scroll', this.onScrollbound);


Null reference error when panel destroyed early

Medium Severity

In willDestroy, this.currentPanel.querySelector(...) is called without checking if currentPanel exists. The property is declared with declare (uninitialized) and only set in registerPanel. If the component is destroyed before registerPanel fires (e.g., rapid conditional toggling), currentPanel remains undefined and calling .querySelector() on it throws a TypeError.

cursor · 2026-01-29T10:17:57Z

addon/components/o-s-s/context-menu/panel.hbs

+      <OSS::ScrollablePanel
+        id={{this.portalId}}
+        class="context-menu-panel__scrollable-container"
+        {{did-insert this.registerPanel}}


Duplicate registration causes leaked listeners and overwrites

Medium Severity

The template calls registerPanel via did-insert on both OSS::ScrollablePanel (line 7) and OSS::InfiniteSelect (line 20). Since scheduleOnce uses a new inline arrow function each call, both invocations of initializeDropdown execute. The second attachDropdown call overwrites cleanupDrodpownAutoplacement, losing the first cleanup function and leaking that auto-update listener. Additionally, scroll listeners may be added to both elements while currentPanel gets overwritten.

Additional Locations (1)

addon/components/o-s-s/context-menu/panel.hbs#L19-L20

addon/components/o-s-s/context-menu/panel.hbs

addon/components/o-s-s/context-menu/panel.ts

tests/dummy/app/controllers/input.ts

cursor

Cursor Bugbot has reviewed your changes and found 3 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

cursor · 2026-01-29T11:26:14Z

addon/components/o-s-s/context-menu/panel.hbs

+          @items={{@items}}
+          @searchEnabled={{false}}
+          @onSelect={{this.noop}}
+          @onClose={{this.closeDropdown}}


Reference to undefined closeDropdown method

Medium Severity

The template references this.closeDropdown for the @onClose callback, but no closeDropdown method exists in the component class. This results in undefined being passed to OSS::InfiniteSelect, meaning keyboard events like Escape and Tab that trigger onClose won't have any effect on closing the context menu panel.

cursor · 2026-01-29T11:26:14Z

addon/components/o-s-s/context-menu/panel.hbs

+                class="infinit-select-option-panel-container {{if (eq index this.subReferenceIndex) 'active' ''}}"
+              />
+            {{else if item.rowRenderer}}
+              <item.rowRenderer @item={{item}} {{on "mouseenter" this.closeSubMenu}} {{on "click" this.closeSubMenu}} />


Custom rowRenderer items don't trigger item action on click

Medium Severity

Items with a custom rowRenderer have their action callback silently ignored. The click handler only calls this.closeSubMenu and doesn't invoke item.action. This is inconsistent with regular items, which call the action via @onSelect={{item.action}} on the Option component. Users defining custom row renderers with actions would expect those actions to execute on click.

cursor · 2026-01-29T11:26:14Z

tests/dummy/app/components/panel/example-row.hbs

@@ -0,0 +1,4 @@
+<div>
+  🦆 -


Duck emoji accidentally committed in test component

Low Severity

A duck emoji (🦆 -) appears to be test debris left in the template. The PR discussion confirms the author acknowledged this was unintentional ("Not at all, was a miss from a test I suppose").

addon/components/o-s-s/context-menu/panel.ts

Miexil · 2026-01-29T08:51:45Z

addon/components/o-s-s/context-menu/panel.hbs

+                @disabled={{item.disabled}}
+                @onSelect={{item.action}}
+                {{on "mouseenter" this.closeSubMenu}}
+                {{on "click" this.closeSubMenu}}


I think this is incorrect.

Click should trigger the item.action method (if any)

More info in the "Data structure" of the RFC here, you can check #4 of the parameter description, for action

aprentout self-assigned this Jan 26, 2026

upfluence-bot added reviewed/work-in-progress and removed reviewed/work-in-progress labels Jan 26, 2026

aprentout force-pushed the ap/dra-4463 branch from 804c768 to 586ad40 Compare January 26, 2026 14:04

upfluence-bot added reviewed/work-in-progress and removed reviewed/work-in-progress labels Jan 26, 2026

aprentout force-pushed the feature/bulk-action-workflow branch from 42ff1ac to cdf0be3 Compare January 26, 2026 14:31

[WIP] Add new OSS::ContextMenu::Panel component

5ff494e

aprentout force-pushed the ap/dra-4463 branch from 586ad40 to 5ff494e Compare January 26, 2026 14:33

upfluence-bot added reviewed/work-in-progress and removed reviewed/work-in-progress labels Jan 26, 2026

[WIP] Improve component & add tests

6e91c11

upfluence-bot added reviewed/work-in-progress and removed reviewed/work-in-progress labels Jan 27, 2026

[ContextMenu::Panel] Improve mouse event behavior & add scroll shadow

63798cc

upfluence-bot added reviewed/work-in-progress and removed reviewed/work-in-progress labels Jan 28, 2026

[ContextMenu::Panel] Add styling

e2cad0a

upfluence-bot added reviewed/work-in-progress and removed reviewed/work-in-progress labels Jan 28, 2026

aprentout commented Jan 28, 2026

View reviewed changes

upfluence-bot added reviewed/needs-work and removed reviewed/work-in-progress reviewed/needs-work labels Jan 28, 2026

aprentout added 2 commits January 28, 2026 16:21

[ContextMenu::Panel] Fix pr feedbacks

5699981

[ContextMenu::Panel] Improve default values

e3f0d3a

upfluence-bot added reviewed/needs-review and removed reviewed/needs-work labels Jan 29, 2026

nathalieArnoux reviewed Jan 29, 2026

View reviewed changes

upfluence-bot added reviewed/needs-work and removed reviewed/needs-review labels Jan 29, 2026

cursor bot reviewed Jan 29, 2026

View reviewed changes

upfluence-bot added reviewed/needs-work reviewed/needs-review and removed reviewed/needs-work labels Jan 29, 2026

cursor bot reviewed Jan 29, 2026

View reviewed changes

upfluence-bot added reviewed/needs-work and removed reviewed/needs-review reviewed/needs-work labels Jan 29, 2026

[ContextMenu::Panel] Fix failing tests & pr feedbacks

ef65320

aprentout force-pushed the ap/dra-4463 branch from 56b55a9 to ef65320 Compare January 29, 2026 13:31

upfluence-bot added reviewed/needs-review and removed reviewed/needs-work labels Jan 29, 2026

Miexil reviewed Jan 30, 2026

View reviewed changes

upfluence-bot added reviewed/needs-work and removed reviewed/needs-review labels Jan 30, 2026

New OSS::ContextMenu::Panel component #626

Are you sure you want to change the base?

New OSS::ContextMenu::Panel component #626

Conversation

aprentout commented Jan 26, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

What are the observable changes?

Good PR checklist

Uh oh!

linear bot commented Jan 26, 2026

Uh oh!

aprentout Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nathalieArnoux Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

Missing cleanup call causes memory leak on destroy

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

Null reference error when panel destroyed early

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

Duplicate registration causes leaked listeners and overwrites

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

Reference to undefined closeDropdown method

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

Custom rowRenderer items don't trigger item action on click

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

Duck emoji accidentally committed in test component

Uh oh!

Uh oh!

Uh oh!

Miexil Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

aprentout commented Jan 26, 2026 •

edited by cursor bot

Loading

Reference to undefined `closeDropdown` method