Merge pull request #467 from acelaya-forks/feature/comma-separated-tags

Feature/comma separated tags

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*

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(',') ]) ],
+      )}
     />
   );
 };

test/tags/helpers/TagsSelector.test.tsx

@@ -49,10 +49,14 @@ describe('<TagsSelector />', () => {
     ]);
   });
 
-  it('invokes onChange when new tags are added', () => {
+  it.each([
-    wrapper.simulate('addition', { name: 'The-New-Tag' });
+    [ '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([