Topic: Chip Input handleClose property is not working
Expected behavior
When click on the close (x) icon the chip has to be hidden
Actual behavior
When click on the close (x) icon, no actions are getting triggered. Please find the below code snippet, in that scenario when click on the close icon it should trigger the myCloseFunction method and display the alert with the given message, but the event is not even triggered, we've tried with binding (this.myCloseFunction = this.myCloseFunction.bind(this);
) the event as well, but no luck
Resources (screenshots, code snippets etc.)
<MDBChipsInput handleClose={() => this.myCloseFunction()} />
myCloseFunction = () => {
alert("close function triggered...");
}
Please let me know for any further information
Thanks :)
Konrad Stępień staff answered 5 years ago
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.
Venky answered 5 years ago
Hi,
Expected Behavior
- Populate the predefined tags on user type in the chip input.
- 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", ......].
- There is a way to identify which chip got deleted, something like index of the deleted chip.
- 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
- MDBChipsInput's handleClose method is not working.
- Not able to identify the index of the deleted chip.
- Not able to get added texts or deleted ids.
Please let me know for any clarifications on the same.
Thanks :)
Konrad Stępień staff answered 5 years ago
Hi @Venky
I made code for you and my code print in the console:
- Deleted element
- Deleted indexOf element
- 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;
Venky commented 5 years ago
Hi,
Thanks for the solution. BTW we've up to date on mdbreact (v4.19.2) :) We are awaiting for the next release
Thanks :)
Konrad Stępień staff commented 5 years ago
Thank you very much for your feedback! I will make it in the next release (30 September). If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.
Best Regards, Konrad.
mark-steven-au pro premium answered 4 years ago
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
Piotr Glejzer staff commented 4 years ago
if you don't want to have rounded chips you have to add your styles to do that. Possible is everything that you can find in an API. If you want something I can add to the list. ( yes I know this is a another list for another component but we don't make a release now so if you have some advice let me know )
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.18.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No