[tree view] Custom icons always show indeterminate checkbox on parent when selecting a descendant

[michelengelen]

@michelengelen Thanks, it kind of works. The items now display radio buttons and they behave correctly when selected. However, I noticed that if a child item is checked, the parent switches from a radio button to a tri-state checkbox. This feels a bit inconsistent visually, as the UI starts mixing radio buttons and checkboxes.

Originally posted by @Lure5134 in #18073

example code:

import * as React from 'react';
import Box from '@mui/material/Box';
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { TreeItem, TreeItemProps, TreeItemSlotProps } from '@mui/x-tree-view/TreeItem';
import { MUI_X_PRODUCTS } from './products';

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: TreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  return (
    <TreeItem
      {...props}
      ref={ref}
      slotProps={
        {
          checkbox: {
            size: 'small',
            icon: <RadioButtonUncheckedIcon />,
            checkedIcon: <RadioButtonCheckedIcon />,
          },
        } as TreeItemSlotProps
      }
    />
  );
});

export default function CheckboxSlotProps() {
  return (
    <Box sx={{ minHeight: 200, minWidth: 350 }}>
      <RichTreeView
        defaultExpandedItems={['grid', 'pickers']}
        checkboxSelection
        items={MUI_X_PRODUCTS}
        slots={{ item: CustomTreeItem }}
        selectionPropagation={{ parents: false, descendants: false }}
      />
    </Box>
  );
}

[flaviendelangle]

You just need to also pass indeterminateIcon: <RadioButtonUncheckedIcon />,
Otherwise, you are only overriding checked and unchecked, not the intermediary state

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: TreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  return (
    <TreeItem
      {...props}
      ref={ref}
      slotProps={
        {
          checkbox: {
            size: 'small',
            icon: <RadioButtonUncheckedIcon />,
            checkedIcon: <RadioButtonCheckedIcon />,
            indeterminateIcon: <RadioButtonUncheckedIcon />, // or <RadioButtonCheckedIcon /> if you prefer
          },
        } as TreeItemSlotProps
      }
    />
  );
});

[github-actions]

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.