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.

[vezaynk]

@devongovett Is it possible to disable all keyboard interactions while this work is pending? I rather have working inputs than accessible DnD (for which we have buttons anyways).

[nwidynski]

@vezaynk Look for an isKeyboardNavigationDisabled prop. Not sure whether its exposed in RAC but its definitely present in the hooks, so may just need to be type ignored.

[vezaynk]

@nwidynski Could you help me out, where exactly should I pass it? To useDragAndDropHooks? ``GridList`? I did a quick search of the code and it's not obvious to me.

In fact, there's this implementation detail which makes it seem not overridable:

react-spectrum/packages/@react-stately/grid/src/useGridState.ts

Line 119 in d434b6d

isKeyboardNavigationDisabled: false,

[nwidynski]

@vezaynk I will have to check when back at the keyboard, but i think ive also misread what you are looking for - this state will not disable all keyboard interaction, just navigating arrow keys.

Maybe blocking events in the capture phase could be an option but needs investigation.

[vezaynk]

I'm open to anything. Just want the spacebar to stop being intercepted by DND, whatever the trade-off.

[nwidynski]

@vezaynk There you go https://codesandbox.io/p/sandbox/musing-cori-xzfcr8

[vezaynk]

I think that link is incorrect. It's the link I shared at the start of the issue.

[nwidynski]

https://codesandbox.io/p/sandbox/react-aria-gridlist-input-space-bug-forked-4gydx3

Just be aware you may want to filter navigation keys and let these propagate, but you get the gist of how it works 👍

[vezaynk]

It doubles every key stroke. I removed document.activeElement.value += e.key; and it seems to work fine at first glance. Thanks!

[vezaynk]

@nwidynski Getting reports that it actually doesn't consistently work fine. Spaces are sometimes still ignored. I can't reproduce, but it seems like it doesn't properly solve it. Tell me more about the isKeyboardNavigationDisabled.