React-tags: Clearing input on blur

Have you looked at using v6 of this component?

https://github.com/i-like-robots/react-tags/tree/6.0

This version has both an onBlur callback and .clearInput() method 😄

Nice! Solves it for me 🙂

@i-like-robots Sorry to comment again on this, but it is unclear to me as to how to access to clearInput() method since there is no ref exposed by the package? Normally I would use something like this.reactTagsRef.current.clearInput() to access a child method like that.

Add a ref to your instance of the component, using the example in this repo and extending it with an onBlur callback:

class App extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      tags: [],
      suggestions: []
    }

+   this.reactTags = React.createRef()
  }

  onDelete (i) {
    const tags = this.state.tags.slice(0)
    tags.splice(i, 1)
    this.setState({ tags })
  }

  onAddition (tag) {
    const tags = [].concat(this.state.tags, tag)
    this.setState({ tags })
  }

+ onBlur () {
+   if (this.reactTags.current) {
+     this.reactTags.current.clearInput()
+   }
+ }

  render () {
    return (
        <ReactTags
+         ref={this.reactTags}
          tags={this.state.tags}
          suggestions={this.state.suggestions}
+         onBlur={this.onBlur.bind(this)}
          onDelete={this.onDelete.bind(this)}
          onAddition={this.onAddition.bind(this)}
        />
    )
  }
}

Perfect, thanks!