[DropdownMenu] no way to "flip" content instead of shifting in v1.0.0

[misha-erm]

Bug report

Current Behavior

I'm in the process of upgrading to dropdown-menu to 1.0.0 and noticed a small change in behaviour. On version 0.1.6 it used to switch 'align' when collision was there but now it just moves moves content slightly along the axis.

Is there a way to switch to previous behaviour?

On attached screenshots you can see that data-aligned was changed to 'end' when collision occurs but 1.0.0 keeps 'start'

0.1.6 1.0.0

Expected behavior

I'd like to have a way to disable shifting content and prefer Flip when collision occurs

Reproducible example

CodeSandbox Template

Suggested solution

Introduce a new prop to control it? Maybe avoidCollisions can be converted to enum, e.g. avoidCollisionsMode: 'off' | 'flip' | 'shift' | 'auto'

Additional context

The issue is based on discussions: https://discord.com/channels/752614004387610674/803656530259738674/1001062835306119218 https://discord.com/channels/752614004387610674/803656530259738674/1001064659119509545

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dropdown-menu	1.0.0
React	n/a	16.14
Browser	Brave	Version 1.40.113 Chromium: 103.0.5060.114 (Official Build) (x86_64)
Assistive tech
Node	n/a
npm/yarn
Operating System	MacOs	12.4

[andy-hook]

@benoitgrelard This came up in Discord and I was re-examining our decision to always Shift along one axis, it makes sense for ContextMenu but I can see the argument for having it on DropdownMenu in some situations.

[benoitgrelard]

It seems potentially we need to give more flexibility/access to the underlying floating-ui configuration.

[jgoz]

Yeah, it would be great if we could opt into flip semantics for any component that uses react-popper internally (instead of shift).

[misha-erm]

Got into another use-case in which I want to shift dropdown content along side axis instead of flipping.

So the problem occurs when the dropdown content can't fit on any side. It just stays at the default side and it's impossible to reach to items that are off-screen.

Would be nice if dropdown could switch to 'shift' mode an try to fit itself on screen. Even if it moves above he trigger it's still better than invisible items, imo

P.S. I found that Select component has --radix-select-content-available-height. If dropdown had the same variable available I think that would be a good enough solution for me.

P.P.S Oh, I already see this in the code https://github.com/radix-ui/primitives/blob/main/packages/react/dropdown-menu/src/DropdownMenu.tsx#L205 . That's cool. So it's just not released yet?

[benoitgrelard]

Hey @MikeYermolayev yes, this is a different issue than shifting, rather an issue of size constraining.

As you have discovered, this is something we have implemented already but just haven't released.

In the meantime you can rely on the equivalent "private" popper variable if you want, and if you promise to update it later to use the dropdown menu one once we release 😉

[misha-erm]

Yep, I upgraded to release candidate instead 😅

Works good so far 👍🏻

[benoitgrelard]

Yep, I upgraded to release candidate instead 😅

Or that! 🙂

Works good so far 👍🏻

🎉

[akattow]

If I'm reading correctly, @MikeYermolayev 's sizing issue is handled (and is released now, I believe?) but as far as I can tell, there still isn't a solution for extending control of avoidCollisions (e.g. 'off' | 'flip' | 'shift' | 'auto' as OP suggested) I found a number of issues (many closed) related to this, but I also don't see any active branches or PRs to address this -- am I missing something? Or is this still an outstanding issue?

[misha-erm]

@akattow yep, that's right. It's not possible to control how collisions should be avoided

[akattow]

@MikeYermolayev yes, I know, but I'm wondering if that is still something that is under consideration or active development? It's been brought up in multiple issues

[ciampo]

@benoitgrelard just to make sure I'm not missing anything here: what if there simply isn't enough space in the viewport to show the full dropdown menu?

Is it possible to have the dropdown resize when meeting the edge of the viewport, similarly to this example from floating UI ? That would allow to show scrollbars internally to the dropdown, so that all items can be accessed

[joaom00]

@ciampo https://www.radix-ui.com/docs/primitives/components/dropdown-menu#constrain-the-contentsub-content-size