Cant add the tags automatically if its valid without entering key button like enter/tab etc
AbhaysinghBhosale opened this issue · comments
Can we add the tag if it is valid with the keys. ie normally it needs the key like comma or enter etc but is it possible to add the tag automatically if it is valid while typing.
Exp i am taking email ids and user can add them with by adding comma so on entering comma tags get added,but if they does not add comma then that value does not added as tag. It means they have to enter comma each time they enters values.
So i want to add the tags automatically if the entered value is valid email address.
You can use th inputValue & onChangeInput to take care of this:
<TagsInput
className='form-control input-group'
id='filters_input'
value={this.state.filters}
inputValue={this.state.filter}
onChange={filters => this.handleTags(filters)}
onChangeInput={filter => this.handleChangeInput(filter)}
inputProps={{placeholder: 'Add a filter'}}
/>
Then you have:
handleTags(filters) {
this.setState({filters});
}
handleChangeInput(filter) {
this.setState({filter});
}
Then before you save:
const filters = this.state.filters;
const filter = this.state.filter;
// catch a filter added without making it a 'tag' by pressing enter, space, tab, etc
if (filter && filters.indexOf(filter) < 0) {
this.handleTags(filters);
this.handleChangeInput('');
}
I have applied the validation to the tags ie only email should be entered and because of this submit event is not getting called
You could validate the tag in handleChangeInput.. Once it is a valid email, you push it into state.tags and clear state.tag.
Now if we apply this on change input then if i want to type abc@gmail.com regex validation will consider abc@co as valid and will as as tag and this will not allow user to type .com etc
is there any autocomplete props for this so once user type valid email address and changes the focus ie on "submit button" it should add tag