Chip Input handleClose property is not working

Hi @Venky,

Thank you for report this bug!

I will add the issue to our ToDo list and we try to fix it in the near future :)

Best, Konrad.

Hi,

Expected Behavior

1. Populate the predefined tags on user type in the chip input.
2. A method to get the added chips' text in an array format, for example Tag1, Tag2 are added in chip input, then there should be a method to get the text of those added tags in an array something like this ["Tag1", "Tag2", ......].
3. There is a way to identify which chip got deleted, something like index of the deleted chip.
4. And the same deleted chip's text has to be removed from the text array, for example... I've added 3 chips, let's say Tag1, Tag2, Tag3, so if I remove Tag2, then the get added chips method should return ["Tag1", "Tag3"].

Actual Behavior

1. MDBChipsInput's handleClose method is not working.
2. Not able to identify the index of the deleted chip.
3. Not able to get added texts or deleted ids.

Please let me know for any clarifications on the same.

Thanks :)

Hi @Venky

I made code for you and my code print in the console:

1. Deleted element
2. Deleted indexOf element
3. Print my array with active chips

Please check code and tell me if you need more methods. Also please update MDBreact to 4.19.2 version.

We probably will add these methods to the component, but if you need it for this time you have to use my code.

Best regards, Konrad.

import React from 'react';
import { MDBChipsInput } from 'mdbreact';

class ChipsInputPage extends React.Component {
  state = {
    chips: ['chip1', 'chip2']
  };

  handleAdd = e => {
    if (e.charCode === 13) {
      let chipsArr = [...this.state.chips, e.target.value];
      this.setState({ chips: chipsArr }, () => {
        console.log('My chips:', this.state.chips);
      });
    }
  };

  handleRemove = chip => {
    let chipsArr = this.state.chips;
    console.log('Removed:', `"${chip}"`, 'ID:', chipsArr.indexOf(chip));
    chipsArr = chipsArr.filter(element => element !== chip);
    this.setState({ chips: chipsArr }, () => {
      console.log('My chips:', this.state.chips);
    });
  };

  render() {
    return (
      <div style={{ margin: '150px' }}>
        <MDBChipsInput
          placeholder='+Tag'
          secondaryPlaceholder='Enter a tag'
          chips={this.state.chips}
          onKeyPress={this.handleAdd}
          handleClose={this.handleRemove}
        />
      </div>
    );
  }
}
export default ChipsInputPage;

Hi Konrad

2 things

Looking for "chips" MDB website/React left hand search function search for chips nothing comes up. I knew it was available so looked through MDB react online example https://react.mdbootstrap.com/components/pro/chips from there I managed to get back to where it is on the site which is under badges https://mdbootstrap.com/docs/react/components/badges/ but you might want to update for the next person to find it.

second question is it possible to make the "chips" not rounded? Eg rectangle? I could not find anything in the API but thought it might be possible.

If not is it possible to add a small square picture to "badges" like what is possible in "chips"?

thanks Mark