Merge branch 'master' into 6.0

Author: i-like-robots

CHANGELOG.md

@@ -21,6 +21,10 @@
 - Removed `delimiterChars` option
 - Updated React dependency to 16.5+
 
+## 5.13.1
+
+- Fixed an issue where cursor focus could be lost after removing a selected tag
+
 ## 5.13.0
 
 - Added `ariaLabel` option ([Herdismaria](https://github.com/Herdismaria))

lib/ReactTags.js

@@ -105,6 +105,7 @@ class ReactTags extends React.Component {
       onKeyDown: this.onKeyDown.bind(this)
     }
 
+    this.container = React.createRef()
     this.input = React.createRef()
     this.suggestions = React.createRef()
   }
@@ -180,6 +181,26 @@ class ReactTags extends React.Component {
     }
   }
 
+  onDeleteTag (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
@@ -214,7 +235,7 @@ class ReactTags extends React.Component {
     this.state.focused && classNames.push(this.props.classNames.rootFocused)
 
     return (
-      <div className={classNames.join(' ')} onClick={this.onClick.bind(this)}>
+      <div ref={this.container} className={classNames.join(' ')} onClick={this.onClick.bind(this)}>
         <div
           className={this.props.classNames.selected}
           aria-relevant='additions removals'
@@ -226,7 +247,7 @@ class ReactTags extends React.Component {
               tag={tag}
               removeButtonText={this.props.removeButtonText}
               classNames={this.props.classNames}
-              onDelete={this.deleteTag.bind(this, i)}
+              onDelete={this.onDeleteTag.bind(this, i)}
             />
           ))}
         </div>

spec/ReactTags.spec.js

@@ -460,6 +460,11 @@ describe('React Tags', () => {
       sinon.assert.calledWith(props.onDelete, 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')