CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
bdzevel
bdzevel

Reputation: 221

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

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

Upvotes: 5

Views: 11037

Answers (6)

RHauck
RHauck

Reputation: 271

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

Upvotes: 0

hada
hada

Reputation: 167

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

onDelete={() => handleDelete()}

Upvotes: 0

Justus Burger
Justus Burger

Reputation: 674

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.

Upvotes: 1

George.S
George.S

Reputation: 149

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

Upvotes: 0

AndrewW
AndrewW

Reputation: 678

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.

Upvotes: 2

Joey Yi Zhao
Joey Yi Zhao

Reputation: 42500

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

Upvotes: 1

Related Questions