Grid navigation edit mode

[dannify]

This is to solve for the “Editing and Navigating Inside a Cell” case within grid. A user needs the ability to navigate between elements within a card (cell) without it interfering with the grid navigation. For this, we will need to implement an “edit mode” for the cells. This mode will also be applied to TableView when trying to use components such as textfield that also utilizes arrow key functionality.

Keyboard pattern:

• Navigate to a cell
• Press enter
  • If cell doesn’t have any focusable children, do nothing
  • Otherwise, focus the first focusable child
• You can tab between the elements inside the cell, and it wraps around
• All other grid navigation keyboard commands are disabled while in edit mode, including arrow keys, typeahead, page up/page down, home/end, etc.
• Press escape to get out or focus a different cell
• Provide a way for users to programmatically activate edit mode

See also: https://www.w3.org/TR/wai-aria-practices-1.2/#gridNav_inside

This could be implemented in useGridCell and prevent events from going to useSelectableItem/useSelectableCollection when editing.

API:

Add isEditable prop to Cell and useGridCell

• When true - arrow key navigation to focusable children is disabled when not in edit mode
• When false - arrow key navigation to focusable children is enabled (existing behavior).

#3258 has a partial implementation of this edit mode

[ashfaque-pixelotech]

I am facing the similar issue with react-aria-component. We have built a functionality where user can edit inside the table, inside cells we have inputs and combobox, but there are some issues with input field like "space" key is not working properly getting delayed. clicking on left and right arrow navigate to next cell instead it should move cursor inside the input field. with combobox up and down should navigate between options instead it goes to next row.

if any one have a solution for it that would be a great help.

[rostero1]

Another thing to consider are filters rendered beneath column names in the table header, as part of the th element. I'm not sure this would fall into the edit mode category. If so, you'd have to have a toggle to hide/show or enable/disable the filters.

[brilliant-ember]

I can't focus on textfields inside a selectable table row, I am implementing my own selection logic instead of using React-Aria's table selection feature because of that. I don't know if there's another neater workaround

[viktorrenkema]

@brilliant-ember I'm encountering the same issues, would you mind sharing what your workaround has been? I'm using Table, TableBody etc from react-aria-components. Tried using the hook-based approach and useTableData from react-stately but the immutability aspect of it has been causing difficulties in our wysiwyg table editor.

[brilliant-ember]

@brilliant-ember I'm encountering the same issues, would you mind sharing what your workaround has been? I'm using Table, TableBody etc from react-aria-components. Tried using the hook-based approach and useTableData from react-stately but the immutability aspect of it has been causing difficulties in our wysiwyg table editor.

I just made a custom row component that adds a checkbox to the react-aria row, and a context that tracks which rows got selected. Whenever that checkbox gets clicked, it updates a state in the row. Also, it dispatches an event "multiselect" with the id of the row that got selected. Then components who need to listen to that multiselect event got just import that context.

So you just have to use useReducer hook with a context. Here is a link with more information
https://react.dev/learn/scaling-up-with-reducer-and-context