search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.07k stars 1.26k forks source link

[DataGrid] Request for keyboard event for CellFocusIn or CellEnter #3892

Closed ramyab03 closed 2 years ago

ramyab03 commented 2 years ago

Duplicates

Latest version

Summary 💡

We are using MUI DataGrid @mui/x-data-grid in our React application.

In the DataGrid we have icons with ToolTip in 4 columns. We are using MUI ToolTip and Icons. The Tooltip title displays when we mouse hover the icon. Is there a way we can display Tooltip for keyboard users - when they enter/navigate to the cell using arrow keys?

Did not find any keyboard event for CellFocusIn - to set the Tooltip to open.

Examples 🌈

No response

Motivation 🔦

No response

Order ID 💳 (optional)

No response

cherniavskii commented 2 years ago

Hi @ramyab03 Can you provide a minimal example reproducing the issue? You can start with this template or create one from scratch.

Also, make sure to take a look at renderCell docs

cherniavskii commented 2 years ago

@ramyab03 Actually, take a look at https://mui.com/components/data-grid/migration-v4/#removed-props - looks like it's what you're looking for :)

ramyab03 commented 2 years ago

@ramyab03 Actually, take a look at https://mui.com/components/data-grid/migration-v4/#removed-props - looks like it's what you're looking for :)

Thank You @cherniavskii - Will take a look.

flaviendelangle commented 2 years ago

Maybe the basic componentsProps usecases should be more documented so that we can link the real doc instead of the migration guide.

For instance a new Add custom cell / row listeners section may be easier to understand than a componentsProps generic section in a Components page which looks like an advanced topic.

EDIT: Sidenote the Events page name can be misleading since people can think it's the DOM events of the DataGrid, not our custom event system.

m4theushw commented 2 years ago

By default the Tooltip displays its label when its child element receives focus. For its child to receive focus via the keyboard, it needs to have a tabIndex. This demo uses a IconButton so it has tabIndex=0 for free. In the DataGrid, the current focused cell has tabIndex=0 which makes the focus to always move to the cell when navigating with the arrows, so not showing the label. I'll wait for the reproduction to understand what you're trying to build, but I believe that only by not adding tabIndex to the cell that contains the Tooltip does the trick, not requiring to listen for the events.

ramyab03 commented 2 years ago

Here is the example - https://codesandbox.io/s/datagrid-v5-quick-start-forked-0t1wx?file=/src/App.tsx

github-actions[bot] commented 2 years ago

Since the issue is missing key information, and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

flaviendelangle commented 2 years ago

I am re-opening it since we have a reproduction case

m4theushw commented 2 years ago

@ramyab03 In the example provided you're not using IconButton but only non-interactive icons. Wrapping the icon in a IconButton shows the tooltip when the cell gets focused.

shahidify commented 4 months ago

By default the Tooltip displays its label when its child element receives focus. For its child to receive focus via the keyboard, it needs to have a tabIndex. This demo uses a IconButton so it has tabIndex=0 for free. In the DataGrid, the current focused cell has tabIndex=0 which makes the focus to always move to the cell when navigating with the arrows, so not showing the label. I'll wait for the reproduction to understand what you're trying to build, but I believe that only by not adding tabIndex to the cell that contains the Tooltip does the trick, not requiring to listen for the events.

Hi, I have a follow up question on a similar issue (sorry, I understand this issue is closed. I will create a new issue if it's needed) For GridCell, I resolved it using the same approach. However, the same approach does not work on column header cell since it does not have hasFocus. Column header tooltip is not displayed on keyboard focus navigation. Our requirement is to display tooltip on keyboard focus especially when header label is not fully displayed (ellipsis). Any suggestion?