diff --git a/README.md b/README.md
index 8b91b42b..a9fb6c5a 100644
--- a/README.md
+++ b/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
diff --git a/__snapshots__/src/index.test.js.md b/__snapshots__/src/index.test.js.md
index dd9b4f7c..ffc0e359 100644
--- a/__snapshots__/src/index.test.js.md
+++ b/__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 {}}
diff --git a/__snapshots__/src/index.test.js.snap b/__snapshots__/src/index.test.js.snap
index 26a52e1b..1f427db0 100644
Binary files a/__snapshots__/src/index.test.js.snap and b/__snapshots__/src/index.test.js.snap differ
diff --git a/src/index.js b/src/index.js
index dc11f08d..2944850f 100644
--- a/src/index.js
+++ b/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 {
diff --git a/src/index.keyboardNav.test.js b/src/index.keyboardNav.test.js
index 6334abb7..e02eb4d4 100644
--- a/src/index.keyboardNav.test.js
+++ b/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()
+ 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()
t.false(wrapper.find('li.focused').exists())