Components with popover selection should not bubble keyboard events
- 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
Assessment
This issue has not been assessed yet.