diff --git a/CHANGELOG.md b/CHANGELOG.md index 2a740759..128b91bd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] ### Added * [#460](https://github.com/shlinkio/shlink-web-client/pull/460) Added dynamic title on hover for tags with a very long title. +* [#462](https://github.com/shlinkio/shlink-web-client/pull/462) Now it is possible to paste multiple comma-separated tags in the tags selector, making all of them to be added as individual tags. ### Changed * *Nothing* diff --git a/src/tags/helpers/TagsSelector.tsx b/src/tags/helpers/TagsSelector.tsx index 21cd1cb8..c7041576 100644 --- a/src/tags/helpers/TagsSelector.tsx +++ b/src/tags/helpers/TagsSelector.tsx @@ -44,13 +44,18 @@ const TagsSelector = (colorGenerator: ColorGenerator) => ( addOnBlur placeholderText={placeholder} minQueryLength={1} + delimiters={[ 'Enter', 'Tab', ',' ]} onDelete={(removedTagIndex) => { const tagsCopy = [ ...selectedTags ]; tagsCopy.splice(removedTagIndex, 1); onChange(tagsCopy); }} - onAddition={({ name: newTag }) => onChange([ ...selectedTags, newTag.toLowerCase() ])} + onAddition={({ name: newTag }) => onChange( + // * Avoid duplicated tags (thanks to the Set), + // * Split any of the new tags by comma, allowing to paste multiple comma-separated tags at once. + [ ...new Set([ ...selectedTags, ...newTag.toLowerCase().split(',') ]) ], + )} /> ); }; diff --git a/test/tags/helpers/TagsSelector.test.tsx b/test/tags/helpers/TagsSelector.test.tsx index 92725838..3c3739cb 100644 --- a/test/tags/helpers/TagsSelector.test.tsx +++ b/test/tags/helpers/TagsSelector.test.tsx @@ -49,10 +49,14 @@ describe('', () => { ]); }); - it('invokes onChange when new tags are added', () => { - wrapper.simulate('addition', { name: 'The-New-Tag' }); + it.each([ + [ 'The-New-Tag', [ ...tags, 'the-new-tag' ]], + [ 'comma,separated,tags', [ ...tags, 'comma', 'separated', 'tags' ]], + [ 'foo', tags ], + ])('invokes onChange when new tags are added', (newTag, expectedTags) => { + wrapper.simulate('addition', { name: newTag }); - expect(onChange).toHaveBeenCalledWith([ ...tags, 'the-new-tag' ]); + expect(onChange).toHaveBeenCalledWith(expectedTags); }); it.each([