adobe / adobe/react-spectrum

Page is scrolled when pressing space on a MenuItem link

Open
#8,916 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

Hi,

If you use an `href` with `MenuItem`, pressing SPACE on a menu item to select it will scroll the page. This only affects links.

Thanks 🙂

### 🤔 Expected Behavior?

Page doesn't scroll when pressing SPACE on a `MenuItem` that is a link, providing the same functionality as `MenuItem` buttons.

### 😯 Current Behavior

Page scrolls on pressing SPACE.

### 💁 Possible Solution

Either keep the scroll locked when pressing SPACE or only activate `MenuItem`s with the enter key.

### 🔦 Context

This is particularly an issue with client-side navigation where the page location doesn't change.

### 🖥️ Steps to Reproduce

Here's a page demonstrating the issue: https://codesandbox.io/p/sandbox/space-on-rac-menu-item-h5tmtp?file=%2Fsrc%2FApp.js

Use the keyboard to open the menu, select a menu item with the arrow keys, then press SPACE to select it.

### Version

1.12.2

### What browsers are you seeing the problem on?

Firefox, Chrome, Safari

### If other, please specify.

_No response_

### What operating system are you using?

macOS 15.7

### 🧢 Your Company/Team

RS

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.