Dropdown: item clipped if positioned right of a Menu

[hubertguillemain]

Steps

Create a top menu bar with the last item being a dropdown and with position ="right".
Some of the downdown's items have a long content

Expected Result

The dropdown is displayed completely and not clipped when expanded

Actual Result

The dropdown items are clipped and not fully visible

Version

0.71.1

Testcase

https://codepen.io/youbi/pen/RZNWjz

[levithomason]

The Dropdown currently does not support menu direction. PRs welcome.

The Fix

We need to add a direction prop to the Dropdown.Menu which simply adds the left className when direction='left'.

We then need to also add a direction prop to the Dropdown. The Dropdown would pass the direction value to the Dropdown.Menu when rendering it. The CSS will then open it on the correct side.

A Workaround

Adding an inline style to the Dropdown.Menu will get the results you need for now:
https://codepen.io/levithomason/pen/XaXjma

<Dropdown.Menu style={{ left: 'auto', right: 0 }}>

Note that in future versions we are considering deprecating the Dropdown sub component API. We would then have only props for defining the menu and items. This will only happen if we can support all features via props, but I wanted to make you aware.

[mprambadi]

is the ticket available can i contribute to this issue ?

[levithomason]

@mprambadi I've not seen a PR for this yet. I think you're in the clear.

Dropdown PRs

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.