Material-UI: Disable only the action icon for Chip

Admin 1
Viewed 3064

I would like to disable the (x) for chip. not the entire component, trying setting up the disabled will disable the entire component.

enter image description here

How can I do that ?

Based on Paven answer I've tried

import Chip from '@material-ui/core/Chip';
import CancelIcon from '@material-ui/icons/Cancel';
import FaceIcon from '@material-ui/icons/Face';

{agent.assignedBots.map(assignedBot => {
   return (
     <Chip
       key={assignedBot.id}
       icon={<FaceIcon />}
       label={assignedBot.name}
       onDelete={() =>
          onRemoveBotHandler(agent.id, assignedBot.id)
       }
       color="secondary"
       deleteIcon={
       <CancelIcon
         disabled={
          (state.removedBot.id == assignedBot.id &&
            state.removedBot.disabled) ||
          assignedBot.isRunning
          }
        />
       }
    />
  );
})}

but no luck.

material-ui reactjs
2 Answers

CancelIcon is just a svg element, it doesn't have disabled props. If you want to disable it, wrap the icon inside IconButton and set disabled to true:

<Chip
  onDelete={handleDelete}
  deleteIcon={
    <IconButton disabled>
      <CancelIcon />
    </IconButton>
  }
/>

Live Demo

Edit 66999737/material-ui-disable-only-the-action-icon-for-chip

user_94494260

In this Chip component delete icon (x) is rendered by default when you have onDelete set. So if you want to really control the delete icon then you need to override this icon property.

As per official doc, deleteIcon property on the chip component will override the default delete icon element. Shown only if onDelete is set.

So you would want to try something like this, here <DeleteIcon> is the actual delete icon that you want to show, you can replace with any icon you want

deleteIcon={<DeleteIcon disabled={disableDelete}/>} by adding this you ll have more control deleteIcon, you can use disabled or any suitable property in your control.

<Chip
        size="small"
        icon={<FaceIcon />}
        label="Deletable Secondary"
        onDelete={handleDelete}
        color="secondary"
        deleteIcon={<DeleteIcon disabled={disableDelete}/>}
      />
user_69039740
Related