JoeRoddy / react-native-tag-autocomplete

React Native Tag Autocompletion
69 stars 26 forks source link

Enter Press does not create the tag . #47

Open bikashsahucbnits opened 5 years ago

bikashsahucbnits commented 5 years ago

While Creating a tag by pressing the Enter Key does not work for me. Anyhow it recognizes the Space Key and works properly. <AutoTags suggestions={this.state.items} tagsSelected={this.state.selectedItems} handleAddition={this.handleAddition} handleDelete={this.handleDelete} onCustomTagCreated={(value) => this.handleInput(value)} createTagOnSpace={true} placeholder="Choose Cliks to share" />

handleDelete = index => { let tagsSelected = this.state.selectedItems; tagsSelected.splice(index, 1); this.setState({ selectedItems: tagsSelected }); }

handleAddition = suggestion => {
    this.setState({ selectedItems: this.state.selectedItems.concat([suggestion]) });
}

handleInput = (value) => {
    this.setState({ selectedItems: this.state.selectedItems.concat([{ "name": value }]) });
}

I Have tested the code on Both Mobile and Web platforms. but :(

bikashsahucbnits commented 5 years ago

handleInput = text => { if (this.submitting) return; if (this.props.allowBackspace) { //TODO: on ios, delete last tag on backspace event && empty query //(impossible on android atm, no listeners for empty backspace) } if (this.props.onChangeText) return this.props.onChangeText(text); if ( this.props.createTagOnSpace && this.props.onCustomTagCreated && text.length > 1 && text.charAt(text.length - 1) === " " || text.charAt(text.length - 1) === "\n" ) { this.setState({ query: "" }); return this.props.onCustomTagCreated(text.trim()); } else if (this.props.createTagOnSpace && !this.props.onCustomTagCreated) { console.error( "When enabling createTagOnSpace, you must provide an onCustomTagCreated function" ); }

// if (text.charAt(text.length - 1) === "\n") {
//   return; // prevent onSubmit bugs
// }

this.setState({ query: text });

};

the above changes in handleInput( ) of index.js can solve the problem

hokaiyipFS commented 2 years ago

I think this can solve the problem instead

   if (text.charAt(text.length - 1) === "\n") {
      this.setState({query: ""}, () => this.props.onCustomTagCreated(text));
    } else {
      this.setState({query: text});
    }