React Material-UI "Chip" component's 'x' (delete) button not working

Question

I cannot get the "Chip" control to honor the "X" button like it does in the examples: http://www.material-ui.com/#/components/chip

Adding "onRequestDelete" property does add the "X" button, but clicking it does nothing. In fact, it does not seem as though hovering over the "X" button itself triggers its hover effect (ie, the whole chip has a hover effect, and the button itself is supposed to have a hover effect - it doesn't seem like the button's hover effect ever happens). It's like I can't get focus of the button.

Note: If I click the chip and press the "Delete" key, " > IN DELETE" is alerted. I've noticed similar behavior since I am also trying to use material-ui-chip-input, "Backspace" works to delete the Chips but I can never use the "X" button(s).

Basic example:

import React from 'react';
import Chip from 'material-ui/Chip';

class MyChip extends React.Component {
    constructor(props) {
        super(props);

        this.delete = this.delete.bind(this);
    }

    delete(e) {
        alert(" > IN DELETE"); // Does not fire on button click (except when I hit "Delete" key, see above explanation)
    }

    render() {
        return <Chip key={0} onRequestDelete={this.delete}>testy</Chip>;
    }
}

Relevant package.json dependencies:

"material-ui": "^0.16.7",
"material-ui-chip-input": "^0.12.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-tap-event-plugin": "^2.0.1",

Just tested your code and it works fine. Are you sure the problem is with `Chip`? You pasted "basic example" - could you please paste the full code you're testing? — szymonm, Jan 31 '17 at 15:04
For me that code doesn't call the delete function. I wrote "basic example" because this is the most basic version of my issue. — bdzevel, Feb 01 '17 at 18:38

score 2 · Answer 1 · answered May 10 '17 at 23:26

I had this same problem. The fix for me was adding a missing dependency on 'react-tap-event-plugin'.

You can find the official docs at http://www.material-ui.com/#/get-started/installation

Relevant parts are:

import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

It seems that you have the plugin in you package.json dependencies, but make sure you're importing and initializing it.

score 1 · Answer 2 · answered Jan 29 '17 at 22:24

1

The remove function doesn't seem to exist. Please try to bind it on the Chip click event:

return <Chip key={0} onRequestDelete={this.delete.bind(this)}>testy</Chip>;

answered Jan 29 '17 at 22:24

Joey Yi Zhao

37,514
71
268
523

1

Sorry! I edited the code in-line before submitting, but actually my method does exist. I fixed this in my question. Please re-read it. I've double and triple checked this in my actual code and everything is kosher. I just messed up when I submitted the question. – bdzevel Jan 29 '17 at 22:55

score 1 · Answer 3 · answered Feb 23 '20 at 14:54

1

I had the same issue in one of my projects. The problem was that we had the pointer-events: none style applied to all svg in a global reset stylesheet. Removing this fixed the issue for me.

answered Feb 23 '20 at 14:54

Justus Burger

655
1
6
6

score 0 · Answer 4 · answered Feb 23 '19 at 08:15

Specify deleteIcon prop on Chip.
Put CloseIcon from mdi-material-ui module into deleteIcon prop.
add onClick function to the CloseIcon.

This way it is going to work on both mobile and desktop. For me plain onRequestDelete didn't work on mobile But I guess newer version of material-ui fixes this.

<Chip deleteIcon={<CloseIcon onClick={this.delete} />}>

score 0 · Answer 5 · answered Sep 23 '20 at 19:54

0

Make sure you are passing the function instead of calling it:

onDelete={() => handleDelete()}

answered Sep 23 '20 at 19:54

hada

137
2
6

score 0 · Answer 6 · answered Jul 13 '21 at 13:41

In my case this helped (apparently the onClick function was the problem):

    <RawChipInput
      ... other Props
      chipRenderer={(
        {
          value,
          isFocused,
          isDisabled,
          isReadOnly,
          handleClick,
          handleDelete,
          className,
        },
        key
      ) => (
        <Chip
          key={key}
          className={className}
          onDelete={handleDelete}
       //   onClick={handleClick}
          label={value}
        />
      )}
    />

React Material-UI "Chip" component's 'x' (delete) button not working

6 Answers6