Duplicate tags Bug solved (#15615)

* added hasExactMatch function

* changed the handleSubmit logic to check for match

* changed the conditional in class for dropdown

* added hasExactMatch conditional to display the AddTag text

* one more conditional to check if string is empty

* changed styling to display hidden text of "Press Enter to add tag"

* lint error fixed

* fix(tags): don't allow same tag spam within add session

---------

Co-authored-by: Kalista Payne <kalista@habitica.com>
Co-authored-by: Kalista Payne <sabrecat@gmail.com>

website/client/src/components/tasks/modal-controls/selectMulti.vue

@@ -56,7 +56,7 @@
         v-if="addNew || availableToSelect.length > 0"
         :class="{
           'item-group': true,
-          'add-new': availableToSelect.length === 0 && search !== '',
+          'add-new': search !== '' && !hasExactMatch,
           'scroll': availableToSelect.length > 5
         }"
       >
@@ -86,7 +86,7 @@
         </b-dropdown-item-button>
 
         <div
-          v-if="addNew"
+          v-if="addNew && search !== '' && !hasExactMatch"
           class="hint"
         >
           {{ $t('pressEnterToAddTag', { tagName: search }) }}
@@ -171,7 +171,8 @@ $itemHeight: 2rem;
     max-height: #{5*$itemHeight};
 
     &.add-new {
-      height: 30px;
+      min-height: 30px;
+      height: auto;
 
       .hint {
         display: block;
@@ -245,6 +246,7 @@ export default {
       selected: this.selectedItems,
       search: '',
       textbox: null,
+      itemsAdded: [],
     };
   },
   computed: {
@@ -272,6 +274,16 @@ export default {
 
       return filteredItems;
     },
+    hasExactMatch () {
+      const searchTerm = this.search.trim().toLowerCase();
+      if (!searchTerm) return false;
+      if (this.itemsAdded.indexOf(searchTerm) !== -1) return true;
+      if (this.availableToSelect.length === 0) return false;
+      if (this.availableToSelect[0].name.toLowerCase() === searchTerm) {
+        return true;
+      }
+      return false;
+    },
   },
   watch: {
     selected () {
@@ -310,6 +322,7 @@ export default {
       this.closeSelectPopup();
     },
     selectItem (item) {
+      if (!item) return;
       this.selectedItems.push(item.id);
       this.$emit('toggle', item.id);
       this.preventHide = true;
@@ -371,9 +384,16 @@ export default {
     handleSubmit () {
       if (!this.addNew) return;
       const { search } = this;
-      this.$emit('addNew', search);
-
-      this.search = '';
+      // If there is a existing tag
+      if (this.hasExactMatch) {
+        this.selectItem(this.availableToSelect[0]);
+        this.search = '';
+      } else {
+        // Creating a new tag as there is no existing tag present
+        this.$emit('addNew', search);
+        this.itemsAdded.push(search.toLowerCase());
+        this.search = '';
+      }
     },
   },
 };