-
Notifications
You must be signed in to change notification settings - Fork 724
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DropdownMenu] no way to "flip" content instead of shifting in v1.0.0 #1568
Comments
@benoitgrelard This came up in Discord and I was re-examining our decision to always |
It seems potentially we need to give more flexibility/access to the underlying |
Yeah, it would be great if we could opt into flip semantics for any component that uses react-popper internally (instead of |
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 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? |
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 😉 |
Yep, I upgraded to release candidate instead 😅 Works good so far 👍🏻 |
Or that! 🙂
🎉 |
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 |
@akattow yep, that's right. It's not possible to control how collisions should be avoided |
@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 |
@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 |
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
![image](https://user-images.githubusercontent.com/8783498/180780342-b1f930c9-deeb-4697-904b-c4a2bb50c307.png)
![image](https://user-images.githubusercontent.com/8783498/180780397-32d3b708-576c-4cff-96ad-37a545868598.png)
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
The text was updated successfully, but these errors were encountered: