adobe / adobe/react-spectrum

Components with popover selection should not bubble keyboard events

Open
#8,240 1 comment 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

After opening a component with a popover (e.g. Picker, ActionMenu), the keyboard events of navigating the popover items with keyboard arrows should not stop propagation and not bubble up (to match how a native `` element works).

### 🤔 Expected Behavior?

Keyboard events when the menu is open should not bubble up if it's handled by the menu.

### 😯 Current Behavior

Keyboard events are bubbled up, so if a parent element also handles arrow keys, those callbacks will get fired as well.

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

in either V3 or S2 Picker.stories.tsx: replace any `` instance with the following:
```
function ExampleComponent(props) {
const {keyboardProps} = useKeyboard({
onKeyDown: (e) => console.log('key down', e.code)
});
const {pressProps} = usePress({
onPress: e => console.log('press')
});

return (


Chocolate
Mint
Strawberry
Vanilla
Chocolate Chip Cookie Dough

);
}
```
observe that arrow keys will hit the `useKeyboard` callbacks

### Version

3.41.0

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

Firefox, Chrome

### If other, please specify.

_No response_

### What operating system are you using?

Sonoma 14.1.1

### 🧢 Your Company/Team

_No response_

### 🕷 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.