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