[TreeView] Click on the checkbox not working

[gustavo4262]

Steps to reproduce

The click on the checkbox only works when is clicked in the center of the checkbox. If I click a little in the edge, it appears like it would be clicked, but it does not

https://github.com/user-attachments/assets/4924e0da-18b0-4cf0-861a-623f544254c5

It would be much better if the click on the checkbox be easier for the user to click.

Current behavior

Does not work when clicked not in the center of the checkbox

Expected behavior

To be toogled when clicked

Context

This is my code

"use client";

import * as React from "react";
import Box from "@mui/material/Box";
import { RichTreeView } from "@mui/x-tree-view/RichTreeView";
import { TreeViewBaseItem } from "@mui/x-tree-view/models";

const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
  {
    id: "grid",
    label: "Data Grid",
    children: [
      { id: "grid-community", label: "@mui/x-data-grid" },
      { id: "grid-pro", label: "@mui/x-data-grid-pro" },
      { id: "grid-premium", label: "@mui/x-data-grid-premium" },
    ],
  },
  {
    id: "pickers",
    label: "Date and Time Pickers",
    children: [
      { id: "pickers-community", label: "@mui/x-date-pickers" },
      { id: "pickers-pro", label: "@mui/x-date-pickers-pro" },
    ],
  },
  {
    id: "charts",
    label: "Charts",
    children: [{ id: "charts-community", label: "@mui/x-charts" }],
  },
  {
    id: "tree-view",
    label: "Tree View",
    children: [{ id: "tree-view-community", label: "@mui/x-tree-view" }],
  },
];

export default function CheckboxMultiSelection() { return ( <Box sx={{ minHeight: 352, minWidth: 290 }}>

</Box>

); }

Your environment

There are my dependencies "dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@headlessui/tailwindcss": "^0.2.1", "@mui/material": "^5.16.7", "@mui/x-data-grid-pro": "^7.6.1", "@mui/x-date-pickers": "^7.6.1", "@mui/x-date-pickers-pro": "^7.10.0", "@mui/x-tree-view": "^7.14.0", "next": "14.2.3", "react": "^18", "react-dom": "^18", },

Search keywords: treeView Order ID: 89106

[dosubot[bot]]

Hey @gustavo4262! I'm here to help you with any issues you're experiencing while waiting for a human maintainer. Let's tackle this together!

The checkbox in the TreeView component only works when clicked in the center due to the CSS styles applied to the classes.checkbox wrapper. The Checkbox component is wrapped inside a div with a className of classes.checkbox, and it has a tabIndex of -1, which might limit the clickable area to the center.

To resolve this issue, inspect and adjust the CSS styles applied to classes.checkbox to ensure the clickable area covers the entire checkbox, not just the center. You can also check the getCheckboxProps function to ensure that all necessary event handlers and properties are correctly applied to the Checkbox component ^[1][2].

To continue talking to Dosu, mention @dosu.

[gustavo4262]

Indeed, it was a problem with CSS. The checkbox component has an input that recieves the click and the svg of the checkbox. For some reason, my input element was smaller than the svg, and it was not being clicked. The input was 16x16 while the svg was 24x24 Fixed it by increasing the size input element

<Box sx={{
          "& .PrivateSwitchBase-input": {
            height: "1.5rem",
            width: "1.5rem",
          } >
    <RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} />
</Box>

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@gustavo4262: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.