From be7b7494fef256ed52290063c84902dcc3a93b05 Mon Sep 17 00:00:00 2001 From: Roberto Rizzo Date: Thu, 3 Sep 2020 15:16:47 +0200 Subject: [PATCH 1/5] Allow TAB key to browse suggestions --- lib/ReactTags.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/ReactTags.js b/lib/ReactTags.js index 97a4fa4..ef96b40 100644 --- a/lib/ReactTags.js +++ b/lib/ReactTags.js @@ -156,7 +156,7 @@ class ReactTags extends React.Component { pressUpKey.call(this, e) } - if (e.key === KEYS.DOWN_ARROW || e.key === KEYS.DOWN_ARROW_COMPAT) { + if (e.key === KEYS.DOWN_ARROW || e.key === KEYS.DOWN_ARROW_COMPAT || e.key === KEYS.TAB) { pressDownKey.call(this, e) } } @@ -308,7 +308,7 @@ ReactTags.defaultProps = { suggestionsTransform: null, autoresize: true, classNames: CLASS_NAMES, - delimiters: [KEYS.TAB, KEYS.ENTER], + delimiters: [KEYS.ENTER], minQueryLength: 2, maxSuggestionsLength: 6, allowNew: false, From 0799f1728d166a0caa8f7538d59689f4f1d1044d Mon Sep 17 00:00:00 2001 From: Roberto Rizzo Date: Thu, 3 Sep 2020 16:18:51 +0200 Subject: [PATCH 2/5] when there is only one suggestion left, add it on ENTER press --- lib/ReactTags.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/ReactTags.js b/lib/ReactTags.js index ef96b40..a2e4690 100644 --- a/lib/ReactTags.js +++ b/lib/ReactTags.js @@ -43,6 +43,10 @@ function pressDelimiter () { } else if (this.props.allowNew) { this.addTag({ name: this.state.query }) } + + if (!this.props.allowNew && this.state.options.length === 1) { + this.addTag(this.state.options[0]); + } } } From 236475d08ce5b33ba282b43914143c418bc96286 Mon Sep 17 00:00:00 2001 From: Roberto Rizzo Date: Fri, 4 Sep 2020 08:15:45 +0200 Subject: [PATCH 3/5] preselect first suggestion when allowNew is false --- lib/ReactTags.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/ReactTags.js b/lib/ReactTags.js index a2e4690..5f91a42 100644 --- a/lib/ReactTags.js +++ b/lib/ReactTags.js @@ -43,10 +43,6 @@ function pressDelimiter () { } else if (this.props.allowNew) { this.addTag({ name: this.state.query }) } - - if (!this.props.allowNew && this.state.options.length === 1) { - this.addTag(this.state.options[0]); - } } } @@ -163,6 +159,10 @@ class ReactTags extends React.Component { if (e.key === KEYS.DOWN_ARROW || e.key === KEYS.DOWN_ARROW_COMPAT || e.key === KEYS.TAB) { pressDownKey.call(this, e) } + + if (!this.props.allowNew && this.state.options.length && this.state.index === -1) { + pressDownKey.call(this, e) + } } onClick (e) { From 4ecd0558552b674078dd92505f59db62c5cbb09f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metag=C3=BBsto?= Date: Fri, 4 Sep 2020 10:09:46 +0200 Subject: [PATCH 4/5] Added ".idea" in the exclusion list. --- .gitignore | 1 + package.json | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index ae1c1e3..c82240c 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ dist example/bundle.js example/bundle.js.map coverage +/.idea/ diff --git a/package.json b/package.json index 90b4001..13cb166 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,8 @@ "Serhiy Yefremenko", "Paul Shannon", "Herdis Maria", - "Sibiraj S" + "Sibiraj S", + "Metagûsto" ], "license": "MIT", "repository": "https://github.com/i-like-robots/react-tags", From 27a70df0d2dc1324f3da967d397f5e0e237e183a Mon Sep 17 00:00:00 2001 From: Roberto Rizzo Date: Fri, 4 Sep 2020 10:48:32 +0200 Subject: [PATCH 5/5] jasmine tests refactoring --- spec/ReactTags.spec.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/spec/ReactTags.spec.js b/spec/ReactTags.spec.js index 8466c9c..400bf02 100644 --- a/spec/ReactTags.spec.js +++ b/spec/ReactTags.spec.js @@ -365,16 +365,11 @@ describe('React Tags', () => { key('ArrowDown') - expect(input.getAttribute('aria-activedescendant')).toEqual(results[0].id) - expect(results[0].className).toMatch(/is-active/) + expect(input.getAttribute('aria-activedescendant')).toEqual(results[1].id) + expect(results[1].className).toMatch(/is-active/) key('ArrowDown', 'ArrowDown') - expect(input.getAttribute('aria-activedescendant')).toEqual(results[2].id) - expect(results[2].className).toMatch(/is-active/) - - key('ArrowDown') - expect(input.getAttribute('aria-activedescendant')).toEqual(results[0].id) expect(results[0].className).toMatch(/is-active/) @@ -412,7 +407,7 @@ describe('React Tags', () => { sinon.assert.notCalled(props.onAddition) - type(query); key('ArrowDown', 'ArrowDown', 'Enter') + type(query); key('ArrowDown', 'Enter') sinon.assert.calledOnce(props.onAddition) sinon.assert.calledWith(props.onAddition, { id: 196, name: 'United Kingdom' })