search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.84k stars 821 forks source link

Force dropdown sub menu to open on left #2628

Closed github-org-account closed 8 months ago

github-org-account commented 1 year ago

We have a Radix nested dropdown and we want the submenus to always open to the left. The default seems to be to the right. I have tried, amongst other things, [data-side] but haven't gotten it to work. Is there a Radix-based way to do this? I also need this to be accessible, and so the left arrow key must open the menu as well.

joaom00 commented 1 year ago

The dropdown will try to keep it in view as much as possible, so for example if you put side="left" but there is no space then it will open to the right and vice versa. If you want to disable collision detection and always open to the left you can use the side="left" and avoidCollisions={false} props in <DropdownMenu.Content>.

I also need this to be accessible, and so the left arrow key must open the menu as well.

I could be wrong but the key that opens the dropdown does not depend on which side it will open but rather the expectation that users will have of which key will open it, which in general would be ArrowDown. An example of this are the sub-menus that, regardless of which side it opens, the key used is ArrowRight for LTR and ArrowLeft for RTL

github-org-account commented 1 year ago

Thank you for your response. From the documentation, and my testing it doesn't seem that side="left" is an option for sub-menus. See my example here: https://codesandbox.io/p/sandbox/zen-dubinsky-grpqny?file=%2FApp.jsx%3A43%2C45

Our sub menus will always have space on the left and will always need to open on the left, so the key to open them will need to be ArrowLeft.

github-org-account commented 1 year ago

Hello, this is still an issue as the first comment didn't solve the problem. Any other suggestions?

sreed-crow commented 1 year ago

I'm also struggling with this. Seems like it should be pretty straightforward. Can the "side" attribute be added to the list of available attributes for submenus? I would hate to have to write some messy javascript that forces this to happen when I have such nice clean dropdown code with the Radix components.

benoitgrelard commented 8 months ago

@joaom00 is correct here. Whilst we could allow users to choose the "side" to open on, it would completely mess with user's expectations of how dropdown submenus are supposed to work as it is inherently linked to the reading-direction and is learnt behaviour from operating systems. For this reason, I don't think we will make any changes here.

If someone has a compelling example that I can't debunk, I'm happy to reconsider but at the moment, I think this would make it too easy to completely destroy user expectations.

jmisur commented 3 weeks ago

For example, Slack has full width content and all dropdown submenus on the right therefore open to the left. In no way is such behavior destroying user expectations, it's just the way it is. Screenshot 2024-10-18 111057

Let's say I don't have full-width content, however I want similar menu always stay inside the content and don't go out of borders to the right. Imo this should be the choice of the developer.