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

admin管理员组

文章数量:1278884

I cannot get the "Chip" control to honor the "X" button like it does in the examples:

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",

I cannot get the "Chip" control to honor the "X" button like it does in the examples: http://www.material-ui./#/ponents/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",

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Jan 29, 2017 at 23:00 bdzevel asked Jan 29, 2017 at 21:58 bdzevelbdzevel 22122 gold badges55 silver badges1313 bronze badges 2

• 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 Commented Jan 31, 2017 at 15:04
• 1 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 Commented Feb 1, 2017 at 18:38

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

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./#/get-started/installation

Relevant parts are:

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

// Needed for onTouchTap
// http://stackoverflow./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.

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>;

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.

1. Specify deleteIcon prop on Chip.
2. Put CloseIcon from mdi-material-ui module into deleteIcon prop.
3. 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} />}>

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

onDelete={() => handleDelete()}

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

本文标签： javascriptReact MaterialUI quotChipquot component39s 39x39 (delete) button not workingStack Overflow