Datagrid focus on cells

[darcimm]

Hi there, we are using a data grid for its sorting capabilities and row actions but have noticed in our implementation and on the Paste website that there's a focus state on any cell that is clicked in the table, even if there isn't an actionable/interactive item in the cell. Wanted to understand if this is intended behavior.

Thanks,
Darci

[dosubot[bot]]

🤖

Hey @darcimm! Great to see you back. 😊 I remember our last cosmic dance through the code. I'm diving into your datagrid conundrum now and will orbit back with insights soon!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hi Darci,

Yes, the focus state on any cell that is clicked in the table is intended behavior. This is part of the Data Grid's full keyboard navigation functionality. When in Navigational mode, data cells can be focused using standard navigation keys, and clicking on a cell will also focus it. This allows users to navigate the Data Grid using the keyboard, which is an accessibility feature.

Here's a snippet from the documentation regarding Navigational mode:

*   The data grid has one tab stop. This means if you press the [Tab] key to enter the data grid,
    the next [Tab] key press will take you to the first element outside the data grid.
*   Data cells can be focused using standard navigation keys, including directional arrows,
    [Home], [End], [Control+Home], [Control+End], [Page up], and [Page down].
*   Tabbing out of the table and back into the table will restore focus to the last selected data cell.
*   Pressing the [Enter] key will swap the user into the **Actionable** mode. If there’s a
    focusable child element in the current cell, it will gain focus.

For more information on keyboard navigation and the Data Grid component, you can visit the Paste documentation:

• Keyboard navigation: https://paste.twilio.design/components/data-grid/#keyboard-navigation
• Data Grid component: https://paste.twilio.design/components/data-grid/

I hope this helps clarify the behavior you're observing!

Best,
PasteBot

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Clickable Rows in Data Grids (updated: 10/28/2022, similarity score: 87%)
• Excel-like editing interaction with DataGrid (updated: 07/07/2023, similarity score: 85%)
• Clickable Rows in Data Grids - Answer (updated: 10/28/2022, similarity score: 85%)

[SiTaggart]

Good job Paste bot

[dosubot[bot]]

🤖

Yes, the focus state on any cell in the data grid, even if there isn't an actionable/interactive item in the cell, is indeed an intended behavior of the Paste design system. This is part of the Data Grid's full keyboard navigation functionality, which is an accessibility feature.

The DataGridCell component in the Paste design system has a handleMouseDown function that ensures that the cell gets focus when it is clicked, regardless of whether it contains an actionable item or not. This is done using the ensureFocus utility function which is called with the cell's reference as an argument.

const handleMouseDown = React.useCallback(() => {
    ensureFocus(cellRef.current);
  }, []);

The ensureFocus utility function is used to ensure that a specific HTML element receives focus if it's not already focused. This function takes two parameters: element and options. The element is the HTML element that you want to focus. The options parameter is an object that can have two properties: preventScroll and isActive.

The preventScroll property is a boolean that, when set to true, prevents the page from scrolling when the element is focused. The isActive property is a function that checks if the element is already focused. If the isActive function returns true, the ensureFocus function does nothing and returns -1. If the isActive function returns false, the ensureFocus function calls the focus method on the element to focus it.

In addition, the onListMutation function and the React.useEffect hook manage the tabindex of the cell and its children based on the actionable mode of the data grid. This ensures that the cell can receive focus as per the tabindex rules.

const onListMutation = React.useCallback(
    (mutationList: MutationRecord[]) => {
      //...
      if (
          mutation.attributeName === "tabindex" &&
          dataGridState.actionable &&
          target.tabIndex === 0 &&
          isCell(target)
        ) {
          target.tabIndex = -1;
        }
      //...
    },
    [dataGridState.actionable],
  );

React.useEffect(() => {
    setTimeout(() => {
      if (cellRef.current) {
        updateTabIndexForActionable(cellRef.current, dataGridState.actionable);
      }
    }, 10);
  }, [dataGridState.actionable]);

You can find more information about this in the DataGridCell component and the ensureFocus utility function in the Paste repository.

I hope this helps clarify the behavior you're observing! If you have any more questions, feel free to ask.

Sources

• packages/paste-core/components/data-grid/src/DataGridCell.tsx
• packages/paste-core/components/data-grid/src/utils/reakit/reakit-ensureFocus.ts

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[darcimm]

Thank you for the detailed answer!! Is there a way to disable the "Navigational mode" on the datagrid, such that you can keyboard navigate only to interactive elements and therefore the focus state doesn't appear on non-interactive cells?

[SiTaggart]

No, that would largely render the grid inaccessible. You have to be able to navigate the entire grid via keyboard to access every cell regardless of content.

To navigate via keyboard every cell must be focusable. A focusable element when clicked will take focus.

The team might be able to explore using :focus-visible which might improve the visual appearance, where it might only show the focus ring on keyboard interactions and not mouse. It'll still be "focused", you just won't be able to see it.

[wlumtwilio]

Hi Simon, do you have an example or reference that shows how to use focus-visible in DataGrid?

[SiTaggart]

No, it would have to happen in the component itself. If the team prioritized exploring it, it would come as a patch, but ultimately it is working as intended, so it would be a low priority fit and finish exploration.