Skip to content

Commit 39189bc

Browse files
lzhao-sentryandrewshie-sentry
authored andcommitted
chore(cell-actions): use popper strategy fixed instead of portalling (#97593)
### Changes Instead of portals, use the fixed strategy. Main reason is that portalling the dropdown to document body does not work with tables in modals due to stacking issues (e.g., planning to add cell actions to viewer table modal in dashboards) There should be no UI change to the dropdown. This change only applies when `discover-cell-actions-v2` is enabled.
1 parent 508f4f2 commit 39189bc

File tree

2 files changed

+7
-1
lines changed

2 files changed

+7
-1
lines changed

static/app/components/dropdownMenu/index.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export interface DropdownMenuProps
6868
| 'preventOverflowOptions'
6969
| 'flipOptions'
7070
| 'shouldApplyMinWidth'
71+
| 'strategy'
7172
> {
7273
/**
7374
* Items to display inside the dropdown menu. If the item has a `children`
@@ -129,6 +130,8 @@ export interface DropdownMenuProps
129130
* only be enabled if necessary, e.g. when the dropdown menu is inside a small,
130131
* scrollable container that messes with the menu's position. Some features, namely
131132
* submenus, will not work correctly inside portals.
133+
*
134+
* Consider passing `strategy` as `'fixed'` before using `usePortal`
132135
*/
133136
usePortal?: boolean;
134137
}
@@ -163,6 +166,8 @@ function DropdownMenu({
163166
portalContainerRef,
164167
shouldApplyMinWidth,
165168
minMenuWidth,
169+
// This prop is from popperJS and is an alternative to portals. Use this with components like modals where portalling to document body doesn't work well.
170+
strategy,
166171
...props
167172
}: DropdownMenuProps) {
168173
const isDisabled = disabledProp ?? (!items || items.length === 0);
@@ -188,6 +193,7 @@ function DropdownMenu({
188193
flipOptions,
189194
onOpenChange,
190195
shouldApplyMinWidth,
196+
strategy,
191197
});
192198

193199
const {menuTriggerProps, menuProps} = useMenuTrigger(

static/app/views/discover/table/cellAction.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -365,7 +365,7 @@ function CellAction({
365365
{cellActions?.length ? (
366366
<DropdownMenu
367367
items={cellActions}
368-
usePortal
368+
strategy="fixed"
369369
size="sm"
370370
offset={4}
371371
position={align === 'left' ? 'bottom-start' : 'bottom-end'}

0 commit comments

Comments
 (0)