SetTagsModal: switch to tag selector

client/src/javascript/components/general/form-elements/TagSelect.tsx

@@ -11,7 +11,7 @@ import TorrentFilterStore from '../../../stores/TorrentFilterStore';
 interface TagSelectProps {
   id?: string;
   label?: React.ReactNode;
-  defaultValue?: string;
+  defaultValue?: TorrentProperties['tags'];
   placeholder?: string;
 }
 
@@ -53,9 +53,11 @@ export default class TagSelect extends Component<TagSelectProps, TagSelectStates
   constructor(props: TagSelectProps) {
     super(props);
 
+    const {defaultValue} = this.props;
+
     this.state = {
       isOpen: false,
-      selectedTags: [],
+      selectedTags: defaultValue != null ? defaultValue : [],
     };
   }
 

client/src/javascript/components/modals/feeds-modal/DownloadRulesTab.tsx

@@ -281,7 +281,7 @@ class DownloadRulesTab extends React.Component<DownloadRulesTabProps, DownloadRu
               id: 'feeds.apply.tags',
             })}
             placeholder={this.props.intl.formatMessage(MESSAGES.tags)}
-            defaultValue={rule.tags.join()}
+            defaultValue={rule.tags}
           />
         </FormRow>
         <FormRow>

client/src/javascript/components/modals/set-tags-modal/SetTagsModal.tsx

@@ -1,8 +1,9 @@
 import {injectIntl, WrappedComponentProps} from 'react-intl';
 import React from 'react';
 
-import {Form, FormRow, Textbox} from '../../../ui';
+import {Form, FormRow} from '../../../ui';
 import Modal from '../Modal';
+import TagSelect from '../../general/form-elements/TagSelect';
 import TorrentActions from '../../../actions/TorrentActions';
 import TorrentStore from '../../../stores/TorrentStore';
 
@@ -56,8 +57,6 @@ class SetTagsModal extends React.Component<WrappedComponentProps, SetTagsModalSt
   }
 
   getContent() {
-    const tagsValue = TorrentStore.getSelectedTorrentsTags()[0].join(', ');
-
     return (
       <div className="modal__content inverse">
         <Form
@@ -65,8 +64,8 @@ class SetTagsModal extends React.Component<WrappedComponentProps, SetTagsModalSt
             this.formRef = ref;
           }}>
           <FormRow>
-            <Textbox
-              defaultValue={tagsValue}
+            <TagSelect
+              defaultValue={TorrentStore.getSelectedTorrentsTags()[0]}
               id="tags"
               placeholder={this.props.intl.formatMessage({
                 id: 'torrents.set.tags.enter.tags',