Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RAC] Table typeahead captures all keyboard input, leaving none for nested Inputs #6037

Open
staticshock opened this issue Mar 11, 2024 · 3 comments · May be fixed by #7277
Open

[RAC] Table typeahead captures all keyboard input, leaving none for nested Inputs #6037

staticshock opened this issue Mar 11, 2024 · 3 comments · May be fixed by #7277

Comments

@staticshock
Copy link

staticshock commented Mar 11, 2024 •
edited
Loading

Provide a general summary of the issue here

I've got a table like this, where the inputs can't capture a single keystroke, because the table hungrily swallows them all:

import { Cell, Column, Input, Row, Table, TableBody, TableHeader } from "react-aria-components";

const items = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map((letter) => ({id:letter}));

export default function Home() {
  return (
    <Table>
      <TableHeader>
        <Column isRowHeader>Name</Column>
        <Column>Value</Column>
      </TableHeader>
      <TableBody items={items}>
        {(row) => (
          <Row>
            <Cell>{row.id}</Cell>
            <Cell><Input type="text" /></Cell>
          </Row>
        )}
      </TableBody>
    </Table>
  );
}

🤔 Expected Behavior?

I'd love for the inputs to Just Work™ in a situation like this.

😯 Current Behavior

Screen.Recording.2024-03-10.at.10.02.48.PM.mov

💁 Possible Solution

  1. Is there a good reason for useTypeSelect to be using the capture phase? If it used the bubble phase, the inputs themselves could choose if/when to stop propagation.
  2. This is a bit more blunt, but why not allow typeahead to be disabled on tables? useSelectableCollection already takes a disallowTypeAhead prop, but there's not currently a way to drill that all the way down through <Table> → useTable → useGrid → useSelectableCollection.

🔦 Context

#1214 is a 3-year-old ticket that mentions that tables swallow spaces, but somehow fails to mention that tables can also swallow all keystrokes as long as the input is matching the value of a row header.

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/old-voice-k5n9p4

Version

"react-aria-components": "^1.1.1"

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response
@reidbarber
Copy link
Member

Supporting editable text inputs inside Table cells is a larger issue under #2328

I do think useTypeSelect using a capture listener may need to be revisited, as it was originally used so that spacebar in fields like picker would be used for typeahead before being used by other handlers. (via #869)

I think we would need a better reason to allow passing disallowTypeAhead into Table, since it's a feature keyboard users may expect.

@staticshock
Copy link
Author

Of course tables are better with typeahead, and a grid edit mode would be amazing, but I don't see a timeline (or even a single response) on #2328, presumably because it's a big project and there's a lot to get right.

I want to benefit from the many accessibility improvements y'all have baked into tables, but when I run into a deal-breaker like this one, it forces my hand to use different tech to power my table, at which point I'll be parting ways not only with the typeahead, but also with all the other accessibility features baked into RAC tables. I think the coupling makes this decision unnecessarily all-or-nothing.

If there's one thing disallowTypeAhead has in its favor is that it's relatively cheap to implement, and it would allow me to build using react-aria now while edit mode is still baking. Even though I'd be turning one feature off, it would be a huge accessibility win for my users.

@reidbarber
Copy link
Member

Even with disabling typeahead now, you'll still run into keyboard accessibility issues with having text fields inside grid cells, so I don't think this is a good use case for RAC Table at the moment unfortunately.

@nwidynski nwidynski linked a pull request Nov 11, 2024 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: Add support for grid edit mode w/ nested interactive widgets nwidynski/react-spectrum
2 participants
@staticshock @reidbarber