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