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.16k stars 1.3k forks source link

Is there a way to handle `DataGrid` `auxClick` event when grid scrollbars are visible? #10703

Closed tomo0613 closed 1 year ago

tomo0613 commented 1 year ago

The problem in depth 🔍

https://codesandbox.io/s/gifted-rgb-fls3dr?file=/src/demo.tsx (increase "rowLength" or "maxColumns" in "useDemoData" to make scrollbars appear)

I'd like to handle "middle mouse click" event on "dataGrid" rows

It works until the content of the DataGrid overflows, either horizontally or vertically; after middle mouse click events are caught and blocked.

I have tried suggested solutions in this issue: https://github.com/mui/mui-x/issues/2138. The only workaround I found is to override and wrap the <GridRow> component in a <a>, but with that solution checkboxSelection breaks.

Your environment 🌎

`npx @mui/envinfo` "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@mui/base": "^5.0.0-alpha.126", "@mui/lab": "^5.0.0-alpha.85", "@mui/material": "^5.12.1", "@mui/styles": "^5.12.0", "@mui/system": "^5.12.1", "@mui/x-data-grid-premium": "^5.15.1", "@mui/x-date-pickers": "^6.2.0", "@reduxjs/toolkit": "^1.8.3", "@uiw/react-md-editor": "^3.6.5", "copy-to-clipboard": "^3.3.1", "cross-fetch": "^3.0.6", "history": "^5.3.0", "miragejs": "^0.1.43", "moment": "^2.29.1", "react": "^17.0.2", "react-dom": "^17.0.1", "react-redux": "^7.2.2", "react-router-dom": "^6.6.2", also tried with "@mui/x-data-grid-premium": "6.16.2" on latest firefox & chrome ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: DataGrid, auxClick, middle mouse click, Order ID: 74503

cherniavskii commented 1 year ago

Hey @tomo0613 I cannot reproduce the issue, it seems to work as expected. Am I missing something?

https://github.com/mui/mui-x/assets/13808724/2f66c9ee-5ab8-4688-afc3-a776dc3f0524

tomo0613 commented 1 year ago

Hi Thanks for your response!

Are you using "middle" or "right" mouse button? (for me, the "right" works, like in your screen recording, but the "middle" does not work)

cherniavskii commented 1 year ago

In the video above I tried the right button (two-finger click on Mac). But I just connected a mouse and the middle button click works as well.

tomo0613 commented 1 year ago

Now I see this is not a MUI related issue. It seems like a windows related one. The same thing happens on random pages where there are scrollable elements. middleMouseClick If that scroll icon appears, the "auxClick" event will be blocked.

Sorry and thanks for your time.

cherniavskii commented 1 year ago

Yep, this is how it works on Windows 👍🏻