Spacebar input is ignored by input fields inside GridListItem if Drag and Drop is in use

[vezaynk]

Provide a general summary of the issue here

When I use GridList + GridListItem + useDragAndDrop, and put an <input /> into the GridListItem, selecting a typing into the input generally works except if I hit space. In which case, the space will be ignored entirely.

Interestingly, this only happens if there is other text inside the input already. Hitting spacebar alone works: typing works fine. Typing "She sells sea shells" results in "Shesellsseashells".

🤔 Expected Behavior?

Space inputs should work when typed into a field

😯 Current Behavior

Space inputs don't work when typed into a field

💁 Possible Solution

Let spacebar events propagate the focused elements inside the GridListItem

🔦 Context

We use GridList for rich, interactive cards with many kinds of inputs. Breaking the users' space inputs is a big issue.

🖥️ Steps to Reproduce

Code sandbox: https://codesandbox.io/p/sandbox/musing-cori-xzfcr8?file=%2Fsrc%2FApp.js

Attempt to type "Hello my name is ..." into one of the input fields. The entered text will be "Hellomynameis..."

Version

react-aria-components: 1.11.0

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[devongovett]

See #4674, #2328.

[vezaynk]

@devongovett Is there any ongoing work to solve this? I see there's one merged PR in #3258 that was referenced, but nothing else.

[nwidynski]

@vezaynk I did a lot of exploration in #7277. There is still work to be done on event leaks, which I think the core team is tackling soonish, see #8628

[devongovett]

#8691 is the latest iteration. Going to close this issue as a duplicate of the others above for now, but we are indeed actively working on this.