FIX: Adding multiple auto tags in watched words admin UI (#13421)

app/assets/javascripts/admin/addon/components/watched-word-form.js

@@ -89,6 +89,7 @@ export default Component.extend({
               word: "",
               replacement: "",
               formSubmitted: false,
+              selectedTags: [],
               showMessage: true,
               message: I18n.t("admin.watched_words.form.success"),
             });

app/assets/javascripts/admin/addon/templates/components/watched-word-form.hbs

@@ -16,10 +16,12 @@
     {{tag-chooser
       id="watched-tag"
       class="watched-word-input-field"
-      allowCreate=true
-      disabled=formSubmitted
       tags=selectedTags
       onChange=(action "changeSelectedTags")
+      options=(hash
+        allowAny=true
+        disabled=formSubmitted
+      )
     }}
   </div>
 {{/if}}
@@ -31,7 +33,7 @@
   </div>
 {{/if}}
 
-{{d-button class="btn-default" action=(action "submit") disabled=formSubmitted label="admin.watched_words.form.add"}}
+{{d-button class="btn btn-primary" action=(action "submit") disabled=formSubmitted label="admin.watched_words.form.add"}}
 
 {{#if showMessage}}
   <span class="success-message">{{message}}</span>

app/assets/stylesheets/common/admin/staff_logs.scss

@@ -406,6 +406,8 @@ table.screened-ip-addresses {
   label {
     display: inline-block;
     min-width: 150px;
+    padding-top: 4px;
+    vertical-align: top;
   }
   input.watched-word-input-field {
     min-width: 300px;
@@ -413,6 +415,10 @@ table.screened-ip-addresses {
   .select-kit.multi-select.watched-word-input-field {
     width: 300px;
   }
+
+  + .btn-primary {
+    margin-top: 1em;
+  }
 }
 
 // Search logs

app/assets/stylesheets/common/select-kit/multi-select.scss

@@ -79,30 +79,8 @@
         }
       }
 
-      .filter {
-        white-space: nowrap;
-        min-width: 50px;
-        padding: 0;
-        outline: none;
-        flex: 1;
-        display: flex;
-
-        .filter-input,
-        .filter-input:focus {
-          border: none;
-          background: none;
-          display: inline-block;
-          width: 100%;
-          outline: none;
-          min-width: auto;
-          padding: 0;
-          margin: 0;
-          outline: 0;
-          border: 0;
-          box-shadow: none;
-          border-radius: 0;
-          min-height: unset; // overrides input defaults
-        }
+      .multi-select-filter .filter-input {
+        padding-left: 5px;
       }
 
       .selected-color {