Menu does not adjust position automatically if it'll be hidden by a browser edge

[praneetloke]

TuSimple/naive-ui version (版本)

2.20.0

Vue version (Vue 版本)

3.2.20

Browser and its version (浏览器及其版本)

Chrome (latest)

System and its version (系统及其版本)

macOS 11.6

Node version (Node 版本)

Reappearance link (重现链接)

https://codesandbox.io/s/damp-dew-l98js

Reappearance steps (重现步骤)

Add a menu with a lengthy label.

(Hover over the "Test" menu item in the codesandbox reproduction URL.)

Expected results (期望的结果)

The submenu containing the lengthy label is automatically placed in a way that is not hidden by the edge.

Actual results (实际的结果)

Any component that renders as an overlay does not seem to account for the edge of the viewport, thus requiring manual placement. Sometimes manual placement is not possible as in the case of a menu with children that might have lengthy labels. You can either place all child items to the side or none at all.

Remarks (补充说明)

[LYErin]

You can use “dropdown-placement” to adjust the position of dropdown submenu.

[praneetloke]

@LYErin thanks for the reply! I realize I could pass dropdown-placement to the Menu component. However, that applies to all submenu items instead of just the ones that would otherwise get hidden by the edge of the browser. I have a similar issue, for example, when I have a grid layout and there is a menu trigger at the edge of the grid item. I have updated the codesandbox to demonstrate the latter problem as well. As mentioned in the issue, I think it is a problem with all overlay components. One could, as you say, specify the dropdown-placement where possible but it would be nice if the component was aware of being at the edge on its own.

EDIT: Another case is the data table selection menu. For that, however, I do think providing an option to specify the dropdown placement might be good enough.

[07akioni]

we may improve the positioning behavior in some edge cases.