react-aria-components Button interferes with global keyboard shortcut handlers

[Talor-A]

Provide a general summary of the issue here

I'm attaching a global cmd+enter hotkey on our webapp, but switching over to react-aria-components is interfering with it.

🤔 Expected Behavior?

see the live repro with code below. I'd expect that pressing cmd+enter while focus is on <Button /> will act the same as when focus is on <button />.

😯 Current Behavior

focus on <Button />:

1. hold cmd: nothing
2. press down enter: global keybind triggers, counter is reset
3. release enter: nothing
4. release cmd: onPress is triggered, counter is incremented

focus on native <button />:

1. hold cmd: nothing
2. press down enter: global keybind triggers, counter is reset
3. release enter: nothing
4. release cmd: nothing

💁 Possible Solution

No response

🔦 Context

we're using react-aria-components on replit.com, and our main "run" action is bound to cmd+enter. clicking a <Button /> and then trying to run your code doesn't work as expected now that we've migrated to react-aria-components.

🖥️ Steps to Reproduce

hosted example: https://react-aria-keyboard-handler-repro-TalorAnderson.replit.app see the code / fork: https://replit.com/@TalorAnderson/react-aria-keyboard-handler-repro?v=1#src/App.tsx

Version

1.0.0-rc.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS Sonoma 14.1.1

🧢 Your Company/Team

replit.com

🕷 Tracking Issue

No response

[reidbarber]

Does the issue persist if you include this in your press handler?

if (e.metaKey) {
  e.continuePropagation();
}

[Talor-A]

Does the issue persist if you include this in your press handler?

if (e.metaKey) {
  e.continuePropagation();
}

yes, I still see the same behavior with this code:

<Button onPress={(e) => {
  if (e.metaKey) {

    e.continuePropagation()
  }
  increment()
}}>
  Increment
</Button>

[devongovett]

I got a 404 on the replit link so can't tell if you're already doing this, but you could try using a capturing event listener for your global events. That would be the recommended approach since any component in the tree might stop propagation.

[Talor-A]

I got a 404 on the replit link so can't tell if you're already doing this

updated it to be public, my mistake.

but you could try using a capturing event listener for your global events. That would be the recommended approach since any component in the tree might stop propagation.

can you explain a bit more why this would be recommended? I haven't really seen this done before