From 2ee2f73dd31fc780b9588992f7737b15c0bd053a Mon Sep 17 00:00:00 2001 From: r-zane-spalding <88853042+r-zane-spalding@users.noreply.github.com> Date: Mon, 7 Mar 2022 11:36:40 -0500 Subject: [PATCH 1/8] Adding disablePoppingOnBackspace prop/implementing --- src/index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) 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 { From dfd7f07d5bd212616206a6c9b78d060f87534ce5 Mon Sep 17 00:00:00 2001 From: r-zane-spalding <88853042+r-zane-spalding@users.noreply.github.com> Date: Mon, 7 Mar 2022 11:37:52 -0500 Subject: [PATCH 2/8] Adding test for disablePoppingOnBackspace --- src/index.keyboardNav.test.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/index.keyboardNav.test.js b/src/index.keyboardNav.test.js index 6334abb7..03a266f1 100644 --- a/src/index.keyboardNav.test.js +++ b/src/index.keyboardNav.test.js @@ -146,6 +146,20 @@ 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) + 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()) From aa00dd3023a2f2c58307a270131ab5b3acd3544c Mon Sep 17 00:00:00 2001 From: r-zane-spalding <88853042+r-zane-spalding@users.noreply.github.com> Date: Mon, 7 Mar 2022 11:38:55 -0500 Subject: [PATCH 3/8] Updating snapshot index.test.js.md --- __snapshots__/src/index.test.js.md | 1 + 1 file changed, 1 insertion(+) diff --git a/__snapshots__/src/index.test.js.md b/__snapshots__/src/index.test.js.md index dd9b4f7c..ffce121a 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" From 6c14c5728943d49088556fd7bb3e2be2e33aee09 Mon Sep 17 00:00:00 2001 From: r-zane-spalding <88853042+r-zane-spalding@users.noreply.github.com> Date: Mon, 7 Mar 2022 11:39:40 -0500 Subject: [PATCH 4/8] Updating snapshot index.test.js.md --- __snapshots__/src/index.test.js.md | 1 + 1 file changed, 1 insertion(+) diff --git a/__snapshots__/src/index.test.js.md b/__snapshots__/src/index.test.js.md index ffce121a..ffc0e359 100644 --- a/__snapshots__/src/index.test.js.md +++ b/__snapshots__/src/index.test.js.md @@ -618,6 +618,7 @@ Generated by [AVA](https://ava.li). }, ] } + disablePoppingOnBackspace={false} id="rdts" inlineSearchInput={false} onAction={Function onAction {}} From 8f4d9d093030240a7f29d58726a18278c62d5629 Mon Sep 17 00:00:00 2001 From: r-zane-spalding <88853042+r-zane-spalding@users.noreply.github.com> Date: Mon, 7 Mar 2022 11:40:59 -0500 Subject: [PATCH 5/8] Updating docs with disablePoppingOnBackspaceProp --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) 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 From 94e8f1039fa1c082380c9e8ce88a4e42d56db20c Mon Sep 17 00:00:00 2001 From: r-zane-spalding <88853042+r-zane-spalding@users.noreply.github.com> Date: Mon, 7 Mar 2022 11:42:13 -0500 Subject: [PATCH 6/8] Removing snapshot --- __snapshots__/src/index.test.js.snap | Bin 4755 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 __snapshots__/src/index.test.js.snap diff --git a/__snapshots__/src/index.test.js.snap b/__snapshots__/src/index.test.js.snap deleted file mode 100644 index 26a52e1b61aed1de3d841d7e624f503fbbaf70c7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4755 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 h$6>OE&Fe5Z!Rk6p25R_+zA10${~w5stkg7r000 Date: Mon, 7 Mar 2022 11:42:54 -0500 Subject: [PATCH 7/8] Adding snapshot back --- __snapshots__/src/index.test.js.snap | Bin 0 -> 4798 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 __snapshots__/src/index.test.js.snap diff --git a/__snapshots__/src/index.test.js.snap b/__snapshots__/src/index.test.js.snap new file mode 100644 index 0000000000000000000000000000000000000000..1f427db0badfd9a00b0f9a9ed3c6cf2ba8a78bf0 GIT binary patch literal 4798 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 Date: Mon, 7 Mar 2022 12:31:39 -0500 Subject: [PATCH 8/8] Removing redundant assertion --- src/index.keyboardNav.test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/index.keyboardNav.test.js b/src/index.keyboardNav.test.js index 03a266f1..e02eb4d4 100644 --- a/src/index.keyboardNav.test.js +++ b/src/index.keyboardNav.test.js @@ -156,8 +156,6 @@ test('cannot delete tags on empty search input with backspace on keyboardNavigat wrapper.instance().searchInput.value = '' triggerOnKeyboardKeyDown(wrapper, 'Backspace') t.deepEqual(wrapper.state().tags.length, 2) - triggerOnKeyboardKeyDown(wrapper, 'Backspace') - t.deepEqual(wrapper.state().tags.length, 2) }) test('remembers current focus between prop updates', t => {