CODEWITHSUNDEEP
reactjsmaterial-ui
user9124444
user9124444

Reputation:

Material-UI: Disable only the action icon for Chip

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.

Upvotes: 3

Views: 11678

Answers (3)

Mir-Ismaili
Mir-Ismaili

Reputation: 17008

The accepted answer causes an ugly big icon (+ extra HTML). I found this way:

const canDelete = ...

<Chip
  onDelete={() => {/*...*/}}
  deleteIcon={
    <DeleteIcon
      sx={[!canDelete && {
        pointerEvents: 'none',
        opacity: (theme) => theme.palette.action.disabledOpacity,
      }]}
    />
  }
/>

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81390

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

Upvotes: 5

Pavan
Pavan

Reputation: 858

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}/>}
      />

Upvotes: 1

Related Questions