Add new handler to ensure focus is not lost when removing a selected tag element

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,9 +150,24 @@ class ReactTags extends React.Component {
     }
   }
 
-  handleTagClick (i) {
-    this.deleteTag(i)
-    this.input.input.focus()
+  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) {
@@ -189,7 +206,7 @@ class ReactTags extends React.Component {
         key={i}
         tag={tag}
         classNames={this.state.classNames}
-        onDelete={this.handleTagClick.bind(this, i)}
+        onDelete={this.handleDeleteTag.bind(this, i)}
       />
     ))
 
@@ -199,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>