Open
Description
Description
Here is a recording that demonstrates the issue:
Screen.Recording.2022-05-31.at.13.27.26.mov
The incorrect positioning for some reason takes place when there is a lack of bottom space.
Expected outcome
The context-menu should be correctly positioned relative to the target.
Minimal reproducible example
<body>
<div style="padding: 500px 0;">
<vaadin-context-menu>
<button>Click me!</button>
</vaadin-context-menu>
</div>
</body>
<script type="module">
import '@vaadin/context-menu';
const menu = document.querySelector('vaadin-context-menu');
menu.items = [
{ text: 'Menu Item 1' },
{ text: 'Menu Item 2' },
{ text: 'Menu Item 3' },
];
</script>Steps to reproduce
- Add the snippet above to an HTML page
- Make sure the target button is at the very bottom of the screen. If not, adapt the viewport size.
- Click the target button.
Environment
Vaadin version(s): 23
OS: Mac OS Monterey
Browsers
Issue is not browser related