Merge pull request #208 from i-like-robots/focus-input-on-delete

Add custom click handler for the tag component

Author: i-like-robots

lib/ReactTags.js

@@ -49,6 +49,8 @@ class ReactTags extends React.Component {
       onInput: this.handleInput.bind(this),
       onKeyDown: this.handleKeyDown.bind(this)
     }
+
+    this.container = React.createRef()
   }
 
   componentWillReceiveProps (newProps) {
@@ -148,6 +150,26 @@ class ReactTags extends React.Component {
     }
   }
 
+  handleDeleteTag (index, event) {
+    // Because we'll destroy the element with cursor focus we need to ensure
+    // it does not get lost and move it to the next interactive element
+    if (this.container.current) {
+      const interactiveEls = this.container.current.querySelectorAll('a,button,input')
+
+      const currentEl = Array.prototype.findIndex.call(interactiveEls, (element) => {
+        return element === event.currentTarget
+      })
+
+      const nextEl = interactiveEls[currentEl - 1] || interactiveEls[currentEl + 1]
+
+      if (nextEl) {
+        nextEl.focus()
+      }
+    }
+
+    this.deleteTag(index)
+  }
+
   addTag (tag) {
     if (tag.disabled) {
       return
@@ -184,7 +206,7 @@ class ReactTags extends React.Component {
         key={i}
         tag={tag}
         classNames={this.state.classNames}
-        onDelete={this.deleteTag.bind(this, i)}
+        onDelete={this.handleDeleteTag.bind(this, i)}
       />
     ))
 
@@ -194,7 +216,7 @@ class ReactTags extends React.Component {
     this.state.focused && classNames.push(this.state.classNames.rootFocused)
 
     return (
-      <div className={classNames.join(' ')} onClick={this.handleClick.bind(this)}>
+      <div ref={this.container} className={classNames.join(' ')} onClick={this.handleClick.bind(this)}>
         <div className={this.state.classNames.selected} aria-live='polite' aria-relevant='additions removals'>
           {tags}
         </div>

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')