Nesting a TextField inside a Table row prevents spaces to be typed into the TextField

[filmaj]

🐛 Bug Report

When putting a TextField into a Table row/cell, typing into the TextField mostly prevents me from entering spaces. If I spam the spacebar a lot, perhaps I can get a few to show up, but generally the spacebar is blocked from input.

🤔 Expected Behavior

I should be able to enter as many spaces into a TextField as I want.

😯 Current Behavior

I can enter most text just fine, but spaces seem to be mostly blocked.

Codesandbox reproducing the behaviour: https://codesandbox.io/s/cool-glitter-vixiw
Repro steps using the above codesandbox:

1. Load the thing (it is a kind of invoice generation app)
2. Scroll down to the bottom of the react app, where there is a single-row table (representing a form where a user is able to enter invoice items)
3. Under the Description column of the table, try typing out a sentence containing multiple spaces.
4. Spaces no workie

💁 Possible Solution

No idea what's going on, perhaps the space key is being hijacked somewhere?

🔦 Context

I want to create a kind of interactive form that has some parts of it nested inside a table. It is an invoice generator. You can kind of think of it like a spreadsheet, I guess?

💻 Code Sample

https://codesandbox.io/s/cool-glitter-vixiw

🌍 Your Environment

Software	Version(s)
react-spectrum	3.5.0
@react-spectrum/table	3.0.0-alpha8
Browser	Google Chrome Version 86.0.4240.111 (Official Build) (x86_64)
Browser	Safari Version 14.0 (15610.1.28.1.9, 15610)
Operating System	macOS 10.15.7

🧢 Your Company/Team

filmaj consulting

🕷 Tracking Issue (optional)

N/A

[LFDanLu]

@filmaj I did some digging and it looks like the useTypeSelect keydown handlers are to blame for the highjacking (https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/selection/src/useTypeSelect.ts#L92). I guess we'll have to figure out a way to drop the capturing listener or add some kind of check to prevent typeahead if the user is in a input field.

[poeschko]

My very hacky workaround for now:

/**
 * Wrapper around react-spectrum's TableView component to work around a bug
 * with handling of the Space key:
 * https://github.com/adobe/react-spectrum/issues/1214
 * The bug is caused by code in
 * https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/selection/src/useTypeSelect.ts#L92
 * that implements "type-ahead" functionality. This workaround
 * effectively disables that functionality, in a pretty hacky way.
 */
function TableViewSpacebarWorkaround({ children }) {
  return (
    <div
      onKeyDownCapture={(event) => {
        // When we capture a keydown event for the space key,
        // replace the key property with another value so that react-spectrum
        // does not trigger its special logic for the space key
        // (assuming we don't really that need, anyway).
        // The new value is a non-breakable space, which is similar to
        // the original space, just in case any other code relies on this event.
        if (event.key === ' ') {
          event.key = '\u00a0';
        }
      }}
    >
      {children}
    </div>
  );
}

We wrap this container around TableView to make the Space key in nested text fields work (including text fields in dialogs opened from a table).

[MeatSim]

GridList also intercepts and debounces spaces from nested TextFields. The hacky workaround worked for me.