Cant add the tags automatically if its valid without entering key button like enter/tab etc

[AbhaysinghBhosale]

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.

[jgentes]

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('');
    }

[AbhaysinghBhosale]

I have applied the validation to the tags ie only email should be entered and because of this submit event is not getting called

[jgentes]

You could validate the tag in handleChangeInput.. Once it is a valid email, you push it into state.tags and clear state.tag.

[AbhaysinghBhosale]

Now if we apply this on change input then if i want to type [email protected] regex validation will consider abc@co as valid and will as as tag and this will not allow user to type .com etc

[jgentes]

Then your regex isn't very good :)

Your regex should prevent abc@co because that's not a valid email address.

On Mon, Mar 4, 2019 at 9:17 PM Abhay Bhosale [email protected] wrote:

Now if we apply this on change input then if i want to type [email protected] regex validation will consider abc@co as valid and will as as tag and this will not allow user to type .com etc

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/olahol/react-tagsinput/issues/187#issuecomment-469541534, or mute the thread https://github.com/notifications/unsubscribe-auth/ABGKHgRoN5ypmhrbKjRoHcjXKghjenViks5vTf3sgaJpZM4ZH2dP .

[AbhaysinghBhosale]

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