[Bug]: Overflow Menu jumping to top of page if originally off screen

[thekevinhunt]

Package

@carbon/web-components

Browser

Chrome

Package version

v2.16.0

React version

No response

Description

Similar to #9827, if an overflow menu in a cds-table toolbar originally appears off the bottom of the screen (requiring scrolling to reach the table), clicking the menu button causes the menu items to appear at the top left of the screen, instead of below the button.

Looking at the HTML, it appears the cds-overflow-menu-body tag starts in the correct location, but after clicking the button, the tag jumps to the very end of the body tag.

It's also worth noting that when the button works normally, the menu items are able to overflow off the right edge of the screen. Fixing this so they move left without going over might also be a good quality of life improvement.

Reproduction/example

https://stackblitz.com/edit/vitejs-vite-kkg8gx?file=index.html,main.js&terminal=dev

Steps to reproduce

1. Ensure browser window is small enough that the table loads below the bottom of the window.
2. Scroll down so the button is within view and click it
3. Buttons appear on the top left of window
4. Inspect HTML to see cds-overflow-menu-body tag is now at the end of

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

IBM Industry Compliace PIMS Portal

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[ariellalgilmore]

Hi @thekevinhunt looking at this more closely I realized the body tag is missing position: relative in the stackblitz. You can also add the selector data-floating-menu-container and styles position: relative to any component parent above overflow-menu and it will keep the overflow-menu from jumping

ref:

carbon/packages/react/src/components/OverflowMenu/OverflowMenu.tsx

Lines 594 to 604 in 812d029

	/**
	* @returns {Element} The DOM element where the floating menu is placed in.
	*/
	_getTarget = () => {
	const { current: triggerEl } = this._triggerRef;
	return (
	(triggerEl instanceof Element &&
	triggerEl.closest('[data-floating-menu-container]')) ||
	document.body
	);
	};

stackblitz: https://stackblitz.com/edit/vitejs-vite-zuyed79e?file=index.html,main.js&terminal=dev

i'll make a seperate issue in our parity work to update the docs to better define this for adopters!