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.11k stars 1.27k forks source link

Mui-data-grid-premium : Can't click away from dropdown(singleSelect) when single edit click #14744

Open lkovesdi opened 4 days ago

lkovesdi commented 4 days ago

Steps to reproduce

(https://codesandbox.io/p/sandbox/material-demo-forked-9zq44)

Steps:

  1. select drop down
  2. once options are shown click outside of the drop down
  3. wont close unless escape is used

Current behavior

Can't click away from dropdown(singleSelect) when single click is added. This is in reference to

https://github.com/mui/mui-x/issues/2186

Expected behavior

Clicking off the dropdown should close the dropdown without forcing user to pick a choice.

Context

No response

Your environment

npx @mui/envinfo ``` System: OS: macOS 15.0 Binaries: Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm pnpm: 8.10.5 - /usr/local/bin/pnpm Browsers: Chrome: 129.0.6668.60 Edge: Not Found Safari: 18.0 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/base: 5.0.0-beta.58 @mui/core-downloads-tracker: 6.1.0 @mui/icons-material: ^6.0.2 => 6.1.0 @mui/lab: ^6.0.0-beta.9 => 6.0.0-beta.9 @mui/material: ^6.0.2 => 6.1.0 @mui/private-theming: 6.1.0 @mui/styled-engine: 6.1.0 @mui/system: next => 6.1.0 @mui/types: 7.2.16 @mui/utils: 6.1.0 @mui/x-charts: ^7.15.0 => 7.17.0 @mui/x-charts-vendor: 7.16.0 @mui/x-data-grid: 7.17.0 @mui/x-data-grid-premium: ^7.15.0 => 7.17.0 @mui/x-data-grid-pro: 7.17.0 @mui/x-date-pickers: ^7.15.0 => 7.17.0 @mui/x-date-pickers-pro: ^7.15.0 => 7.17.0 @mui/x-internals: 7.17.0 @mui/x-license: ^7.15.0 => 7.17.0 @mui/x-tree-view: ^7.15.0 => 7.17.0 @types/react: 18.3.5 => 18.3.5 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^5.5.4 => 5.6.2 ```

Search keywords: Mui-data-grid-premium, singleSelect

MBilalShafi commented 3 days ago

Thank you @lkovesdi for attaching the reproduction example, the issue seems to come from onCellClick handler which doesn't work properly in the case of singleSelect. I suspect this is due to the backdrop of the Select component.

We need to look further into this recipe and fix this specific issue. Feel free to open a PR for the fix if you want.