[DataGrid] Broken checkbox in Material-UI v5 #1577

fmorett · 2021-05-06T10:59:07Z

When using XGrid with controlled selection selecting works with the checkboxes but unselecting does not.

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When clicking on a selected checkbox, the line stays selected and a console output says that selectionModelChange is triggerd but not changed.

Expected Behavior 🤔

When clicking on a selected checkbox the line should be unselected.

Steps to Reproduce 🕹

Minimal example

import { XGrid } from "@material-ui/x-grid";
import React, { useState } from "react";

const columns = [
  {
    field: "name",
    width: 300,
    headerName: "Groupname",
  },
];

const rows = [
  {name: "alice", id: "1"},
  {name: "bob", id: "2"},
  {name: "mark", id: "3"},
]

export function Example() {
  const [gridSelection, setGridSelection] = useState<(string | number)[]>([]);

  return (
      <XGrid
        headerHeight={40}
        disableColumnSelector
        selectionModel={gridSelection}
        onSelectionModelChange={(newSelection) => {
          console.log(newSelection);
          setGridSelection(newSelection.selectionModel);
        }}
        checkboxSelection
        columns={columns}
        rows={rows}
      />
  );
}

Steps:

Click on alice checkbox
Click again
Row is not unselected

https://codesandbox.io/s/material-demo-forked-bni8s?file=/demo.tsx

Context 🔦

Does not work with both selectionModel set or unset.

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: Linux 5.11 Pop!_OS 20.10
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 1.19 GB / 31.34 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 15.7.0 - ~/.nvm/versions/node/v15.7.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v15.7.0/bin/yarn
    npm: 7.4.3 - ~/.nvm/versions/node/v15.7.0/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  Managers:
    Apt: 2.1.10 - /usr/bin/apt
    Composer: 2.0.9 - /usr/local/bin/composer
    Gradle: 4.4.1 - /usr/bin/gradle
    RubyGems: 3.1.2 - /usr/bin/gem
  Utilities:
    Make: 4.3 - /usr/bin/make
    GCC: 10.2.0 - /usr/bin/gcc
    Git: 2.27.0 - /usr/bin/git
  Virtualization:
    Docker: 20.10.6 - /usr/bin/docker
  SDKs:
    Android SDK:
      API Levels: 23, 27, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.3
      System Images: android-30 | Google APIs Intel x86 Atom
  IDEs:
    Nano: 5.2 - /usr/bin/nano
    VSCode: 1.55.2 - /usr/bin/code
  Languages:
    Bash: 5.0.17 - /usr/bin/bash
    Java: 11.0.11 - /usr/bin/javac
    Perl: 5.30.3 - /usr/bin/perl
    PHP: 7.4.9 - /usr/bin/php
    Python3: 3.8.6 - /usr/bin/python3
    R: 4.0.2 - /usr/bin/R
    Ruby: 2.7.1 - /usr/bin/ruby
  Databases:
    SQLite: 3.33.0 - /usr/bin/sqlite3
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 88.0

Order id 💳

#24533

The text was updated successfully, but these errors were encountered:

oliviertassinari · 2021-05-06T11:41:22Z

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

fmorett · 2021-05-06T16:54:01Z

https://codesandbox.io/s/interesting-allen-68o26?file=/src/Demo.tsx

Here is a Demo reproducing that bug

oliviertassinari · 2021-05-06T17:00:26Z

@Fibs7000 Thanks, so the issue is related to the version of Material-UI. Haha, yes, I'm actually surprised to see:

https://github.com/mui-org/material-ui-x/blob/3e4be4de6cd41030eee75e8485c64a9a5ba48502/packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx#L35

We have stopped documenting this signature a long time ago in the core.

oliviertassinari · 2021-05-06T17:01:52Z

The fix is trivial: mui/material-ui#25871

HeavenlyEntity · 2021-12-03T15:05:42Z

Same exact behavior on the DataGridPro component @ZeeshanTamboli if you enable disableSelectionOnClick the checkbox does not trigger a selection. Nor trigger an event.

m4theushw · 2021-12-03T15:11:13Z

@HeavenlyEntity could you open another issue with a reproduction? The demo in https://mui.com/components/data-grid/demo/ uses disableSelectionOnClick and the prop is being called.

HeavenlyEntity · 2021-12-03T15:12:29Z

@HeavenlyEntity could you open another issue with a reproduction? The demo in https://mui.com/components/data-grid/demo/ uses disableSelectionOnClick and the prop is being called.

Before I put in an issue what is the version of the grid currently at in the demo @m4theushw ?

m4theushw · 2021-12-03T15:13:43Z

@HeavenlyEntity v5.1.0.

HeavenlyEntity · 2021-12-03T15:15:58Z

@HeavenlyEntity v5.1.0.

👍 right on, mine is at 5.0.1 so I am going to test updating the package and rerun.

HeavenlyEntity · 2021-12-03T15:25:08Z

@HeavenlyEntity v5.1.0.

👍 right on, mine is at 5.0.1 so I am going to test updating the package and rerun.

Yeah still not working I'll put in an issue. But so you guys see whats going on.

Yet what is strange is it work when you select the row itself just fine. Removing the prop disableSelectionOnClick.

rave · 2022-01-04T10:23:09Z

@HeavenlyEntity
I had the same issue after migrating to new MUI. Fixed that by ensuring my ids that i pass to selectionModel prop have Number type, not string.

Adrian-Benavente · 2022-01-12T16:56:08Z

Ok, I'll show you what was happening to me; hopefully it helps other people. In my case, it was another library stepping in the way of MUI styles as you can see in this screenshot

The solution:

Created a CSS rule for the MUI checkbox element that had more precedence; not the ideal soution, but necessary if you need to keep the other library.

.PrivateSwitchBase-input {
    left: initial !important;
}

HeavenlyEntity · 2022-01-22T22:49:35Z

@HeavenlyEntity I had the same issue after migrating to new MUI. Fixed that by ensuring my ids that i pass to selectionModel prop have Number type, not string.

Hey @rave I was able to fix the problem after removing the pro version of another UI library (mdbreact) that was overriding the click event. I was able to fix the issue with the theming by upgrading to the latest version of the package. If you have that library it will break the checkbox no doubt.

Ok, I'll show you what was happening to me; hopefully it helps other people. In my case, it was another library stepping in the way of MUI styles as you can see in this screenshot

The solution:

Created a CSS rule for the MUI checkbox element that has more precedence; not the ideal soution, but necessary if you need to keep the other library.
.PrivateSwitchBase-input {
    left: initial !important;
}

Also I had issues with the keys so its important to have a getRowId function if you're using unique ids like I am. A number type didn't work as well as a unique id using the crypto lib to create it. This should fix any of those issues. I had to pass the uuid to the key to fix the problem with building the selection array.

werty0u · 2022-02-03T23:03:03Z

Was there ever a fix for this issue since this its closed? I am on V 5.4 of @mui/material and @mui/x-data-grid and am still experiencing this behavior when using checkboxSelection. I was using strings as rowIds and tried switching to numbers to see if that fixed things but it didn't. Clicking on the select checkbox doesnt trigger the onSlectionChange at all. As mentioned above, clicking on other parts of the row triggers the selection.

raphaelbadia · 2022-05-06T20:45:19Z

It happened in my codebase, was caused by a developer that somewhy resized all the inputs to a very small square, in a global file.

// bad global code
input[type='checkbox'] {
  width: 15px; // culprit
  height: 15px; // culprit
  appearance: none;
  margin-right: 10px;
  background-color: white;
  outline: 0;
  border: 0;
  border-radius: 4px;
  box-shadow: none !important;
}

Sometimes, it's not the lib... 😬💀

fmorett added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 6, 2021

oliviertassinari added the status: waiting for author Issue with insufficient information label May 6, 2021

oliviertassinari removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 6, 2021

oliviertassinari removed the status: waiting for author Issue with insufficient information label May 6, 2021

oliviertassinari changed the title ~~XGrid controlled Selection does not unselect on checkbox click~~ [DataGrid] Broken checkbox in Material-UI v5 May 6, 2021

oliviertassinari added bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. labels May 6, 2021

ZeeshanTamboli mentioned this issue May 8, 2021

[DataGrid] Fix broken checkbox in Material-UI v5 #1587

Merged

ZeeshanTamboli closed this as completed in #1587 May 10, 2021

oliviertassinari mentioned this issue May 13, 2021

[DataGrid] Broken checkbox selection in v5 alpha 33 #1663

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Broken checkbox in Material-UI v5 #1577

[DataGrid] Broken checkbox in Material-UI v5 #1577

fmorett commented May 6, 2021 •

edited by oliviertassinari

Loading

oliviertassinari commented May 6, 2021

fmorett commented May 6, 2021

oliviertassinari commented May 6, 2021 •

edited

Loading

oliviertassinari commented May 6, 2021

HeavenlyEntity commented Dec 3, 2021

m4theushw commented Dec 3, 2021

HeavenlyEntity commented Dec 3, 2021 •

edited

Loading

m4theushw commented Dec 3, 2021

HeavenlyEntity commented Dec 3, 2021

HeavenlyEntity commented Dec 3, 2021 •

edited

Loading

rave commented Jan 4, 2022

Adrian-Benavente commented Jan 12, 2022 •

edited

Loading

HeavenlyEntity commented Jan 22, 2022 •

edited

Loading

The solution:

werty0u commented Feb 3, 2022 •

edited

Loading

raphaelbadia commented May 6, 2022

[DataGrid] Broken checkbox in Material-UI v5 #1577

[DataGrid] Broken checkbox in Material-UI v5 #1577

Comments

fmorett commented May 6, 2021 • edited by oliviertassinari Loading

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Minimal example

Context 🔦

Your Environment 🌎

Order id 💳

oliviertassinari commented May 6, 2021

fmorett commented May 6, 2021

oliviertassinari commented May 6, 2021 • edited Loading

oliviertassinari commented May 6, 2021

HeavenlyEntity commented Dec 3, 2021

m4theushw commented Dec 3, 2021

HeavenlyEntity commented Dec 3, 2021 • edited Loading

m4theushw commented Dec 3, 2021

HeavenlyEntity commented Dec 3, 2021

HeavenlyEntity commented Dec 3, 2021 • edited Loading

rave commented Jan 4, 2022

Adrian-Benavente commented Jan 12, 2022 • edited Loading

The solution:

HeavenlyEntity commented Jan 22, 2022 • edited Loading

The solution:

werty0u commented Feb 3, 2022 • edited Loading

raphaelbadia commented May 6, 2022

fmorett commented May 6, 2021 •

edited by oliviertassinari

Loading

oliviertassinari commented May 6, 2021 •

edited

Loading

HeavenlyEntity commented Dec 3, 2021 •

edited

Loading

HeavenlyEntity commented Dec 3, 2021 •

edited

Loading

Adrian-Benavente commented Jan 12, 2022 •

edited

Loading

HeavenlyEntity commented Jan 22, 2022 •

edited

Loading

werty0u commented Feb 3, 2022 •

edited

Loading