Add custom click handler for the tag component which ensures focus is always returned to the input, fixes #207

Author: i-like-robots

lib/ReactTags.js

@@ -148,6 +148,11 @@ class ReactTags extends React.Component {
     }
   }
 
+  handleTagClick (i) {
+    this.deleteTag(i)
+    this.input.input.focus()
+  }
+
   addTag (tag) {
     if (tag.disabled) {
       return
@@ -184,7 +189,7 @@ class ReactTags extends React.Component {
         key={i}
         tag={tag}
         classNames={this.state.classNames}
-        onDelete={this.deleteTag.bind(this, i)}
+        onDelete={this.handleTagClick.bind(this, i)}
       />
     ))
 

spec/ReactTags.spec.js

@@ -420,6 +420,11 @@ describe('React Tags', () => {
       sinon.assert.calledWith(props.handleDelete, sinon.match(0))
     })
 
+    it('moves focus to the input when a tag is removed', () => {
+      click($('.react-tags__selected-tag'))
+      expect(document.activeElement).toEqual($('input'))
+    })
+
     it('deletes the last selected tag when backspace is pressed and query is empty', () => {
       type(''); key('backspace')