No puedo hacer que el control "Chip" respete el botón "X" como lo hace en los ejemplos: http://www.material-ui.com/#/components/chip
Agregar la propiedad "onRequestDelete" agrega el botón "X", pero hacer clic en él no hace nada. De hecho, no parece que al pasar el cursor sobre el botón "X" se active su efecto de desplazamiento (es decir, todo el chip tiene un efecto de desplazamiento, y se supone que el botón en sí tiene un efecto de desplazamiento; no parece que el efecto de desplazamiento del botón sucede alguna vez). Es como si no pudiera enfocar el botón.
Nota: si hago clic en el chip y presiono la tecla "Eliminar", se alerta " > EN ELIMINAR". He notado un comportamiento similar ya que también estoy tratando de usar material-ui-chip-input, "Retroceso" funciona para eliminar los chips, pero nunca puedo usar los botones "X".
Ejemplo básico:
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>; } }Dependencias relevantes de package.json:
"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",Yo tuve el mísmo problema. La solución para mí fue agregar una dependencia faltante en 'react-tap-event-plugin'.
Puede encontrar los documentos oficiales en http://www.material-ui.com/#/get-started/installation
Las partes relevantes son:
import injectTapEventPlugin from 'react-tap-event-plugin'; // Needed for onTouchTap // http://stackoverflow.com/a/34015469/988941 injectTapEventPlugin();Parece que tiene el complemento en sus dependencias de package.json, pero asegúrese de importarlo e inicializarlo.
La función de eliminación no parece existir. Intente enlazarlo en el evento de clic de Chip:
return <Chip key={0} onRequestDelete={this.delete.bind(this)}>testy</Chip>;Tuve el mismo problema en uno de mis proyectos. El problema era que teníamos los pointer-events: none estilo aplicado a todos los svg en una hoja de estilo de reinicio global. Eliminar esto solucionó el problema para mí.