Components with popover selection should not bubble keyboard events

[jluyau]

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 <select> 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 <Picker> 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 (
    <div {...mergeProps(keyboardProps, pressProps)} >
      <select>
        <option>Chocolate</option>
        <option>Mint</option>
        <option>Strawberry</option>
        <option>Vanilla</option>
        <option>Chocolate Chip Cookie Dough</option>
      </select>
    </div>);
}

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

[LFDanLu]

Related to RSP Component Milestones (view)