feat: optionally disable popping on backspace (#551)

* Adding disablePoppingOnBackspace prop/implementing

* Adding test for disablePoppingOnBackspace

* Updating snapshot index.test.js.md

* Updating snapshot index.test.js.md

* Updating docs with disablePoppingOnBackspaceProp

* Removing snapshot

* Adding snapshot back

* Removing redundant assertion

README.md

@@ -66,6 +66,7 @@ A lightweight and fast control to render a select component that can display hie
   - [searchPredicate](#searchpredicate)
   - [inlineSearchInput](#inlinesearchinput)
   - [tabIndex](#tabIndex)
+  - [disablePoppingOnBackspace](#disablePoppingOnBackspace)
 - [Styling and Customization](#styling-and-customization)
   - [Using default styles](#default-styles)
   - [Customizing with Bootstrap, Material Design styles](#customizing-styles)
@@ -421,6 +422,12 @@ Type: `number` (default: `0`)
 
 `tabIndex=0` attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation.
 
+### disablePoppingOnBackspace
+
+Type: `bool` (default: `false`)
+
+`disablePoppingOnBackspace=true` attribute indicates that when a user triggers a 'backspace' keyDown in the empty search bar, the tree will not deselect nodes.
+
 ## Styling and Customization
 
 ### Default styles

__snapshots__/src/index.test.js.md

@@ -462,6 +462,7 @@ Generated by [AVA](https://ava.li).
           },
         ]
       }
+      disablePoppingOnBackspace={false}
       id="rdts"
       inlineSearchInput={false}
       mode="radioSelect"
@@ -617,6 +618,7 @@ Generated by [AVA](https://ava.li).
           },
         ]
       }
+      disablePoppingOnBackspace={false}
       id="rdts"
       inlineSearchInput={false}
       onAction={Function onAction {}}

src/index.js

@@ -49,6 +49,7 @@ class DropdownTreeSelect extends Component {
     searchPredicate: PropTypes.func,
     inlineSearchInput: PropTypes.bool,
     tabIndex: PropTypes.number,
+    disablePoppingOnBackspace: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -60,6 +61,7 @@ class DropdownTreeSelect extends Component {
     showDropdown: 'default',
     inlineSearchInput: false,
     tabIndex: 0,
+    disablePoppingOnBackspace: false,
   }
 
   constructor(props) {
@@ -236,7 +238,7 @@ class DropdownTreeSelect extends Component {
   }
 
   onKeyboardKeyDown = e => {
-    const { readOnly, mode } = this.props
+    const { readOnly, mode, disablePoppingOnBackspace } = this.props
     const { showDropdown, tags, searchModeOn, currentFocus } = this.state
     const tm = this.treeManager
     const tree = searchModeOn ? tm.matchTree : tm.tree
@@ -271,7 +273,12 @@ class DropdownTreeSelect extends Component {
         this.handleClick()
       }
       return
-    } else if (e.key === 'Backspace' && tags.length && this.searchInput.value.length === 0) {
+    } else if (
+      !disablePoppingOnBackspace &&
+      e.key === 'Backspace' &&
+      tags.length &&
+      this.searchInput.value.length === 0
+    ) {
       const lastTag = tags.pop()
       this.onCheckboxChange(lastTag._id, false)
     } else {

src/index.keyboardNav.test.js

@@ -146,6 +146,18 @@ test('can delete tags with backspace/delete on keyboardNavigation', t => {
   t.deepEqual(wrapper.state().tags.length, 0)
 })
 
+test('cannot delete tags on empty search input with backspace on keyboardNavigation when disablePoppingOnBackspace is true', t => {
+  const data = [{ ...node('a', 'a'), checked: true }, { ...node('b', 'b'), checked: true }]
+  const wrapper = mount(<DropdownTreeSelect data={data} disablePoppingOnBackspace={true} />)
+  wrapper.instance().searchInput.value = 'x'
+  triggerOnKeyboardKeyDown(wrapper, 'Backspace')
+  t.deepEqual(wrapper.state().tags.length, 2)
+
+  wrapper.instance().searchInput.value = ''
+  triggerOnKeyboardKeyDown(wrapper, 'Backspace')
+  t.deepEqual(wrapper.state().tags.length, 2)
+})
+
 test('remembers current focus between prop updates', t => {
   const wrapper = mount(<DropdownTreeSelect data={tree} showDropdown="initial" />)
   t.false(wrapper.find('li.focused').exists())