fix(16992): Prevent Page Scroll During Keyboard Navigation in MenuButton and ComboButton options

[2nikhiltom]

Closes #16992

My Initial assumption was that this issue might be related to Floating UI, which we use for positioning. However, after extensive debugging, discovered that the root cause was actually within the Menu component's keyboard navigation logic.

The scrolling issue occurred because the default browser behavior for arrow keys (scrolling the page) was not being prevented when navigating menu items. This led to both the menu focus changing and the page scrolling simultaneously.

e.preventDefault() allows to control the focus movement through menu items without triggering unwanted page scrolling.

Changelog

New
e?.preventDefault() is added to prevent scroll behavior

Changed

Updated focusItem function in Menu

function focusItem(e?: React.KeyboardEvent<HTMLUListElement>) {
    e?.preventDefault();
    const currentItem = focusableItems.findIndex((item) =>
      item.ref?.current?.contains(document.activeElement)
    );

Testing / Reviewing

Go to deploy preview
Open MenuButton and ComboButton components
Expand the menu and use the arrow keys to navigate through the items. verify no scrolls happen unexpectedly
Verify existing functionality of Menu/MenuButton/ComboButton components are intact

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	699d7fe
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/669a2e13937b450008560e6b
😎 Deploy Preview	https://deploy-preview-16998--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	699d7fe
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/669a2e13d4e3470008c9757b
😎 Deploy Preview	https://deploy-preview-16998--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[riddhybansal]

Worked for both ComboButton and MenuButton

[tay1orjones]

Nice fix! I tested by adding a div adjacent to the button with width: 150vh to trigger a vertical scroll. Keyboard nav works great with no impact on page scroll. 🚀