From d02aa8efdb0f8142dddccc4f287ae650a60c1f5d Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 1 Jun 2024 14:10:18 +0000
Subject: [PATCH] feat: Add AutoComplete functionality to activity types input

---
 src/lib/components/AutoComplete.svelte       | 23 ++++++++++++++++----
 src/lib/components/CreateNewAdventure.svelte |  8 ++++++-
 src/lib/components/EditModal.svelte          |  9 ++++++--
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/AutoComplete.svelte b/src/lib/components/AutoComplete.svelte
index d63b4a0..06235f1 100644
--- a/src/lib/components/AutoComplete.svelte
+++ b/src/lib/components/AutoComplete.svelte
@@ -1,12 +1,21 @@
 <script lang="ts">
   export let items: String[] = [];
+  export let displayValue: String = "";
   export let selectedItem;
 
+  let newAdd: String[] = [];
+
   $: inputVal = "";
 
   function onItemClicked(item: String) {
-    selectedItem = item;
-    inputVal = "";
+    // items.push(item);
+    console.log(newAdd);
+    if (newAdd.includes(item)) {
+      return;
+    } else {
+      newAdd.push(item);
+      selectedItem = item;
+    }
   }
 
   $: filteredItems = items.filter(function (item) {
@@ -17,15 +26,21 @@
 <div class="dropdown">
   <input
     class="input input-bordered"
-    placeholder="Existing Activity Types"
-    bind:value={inputVal}
+    placeholder=""
+    bind:value={displayValue}
   />
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <ul
     tabindex="0"
     class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 max-h-80 flex-nowrap overflow-auto"
   >
     {#each filteredItems as item}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y-missing-attribute -->
       <li>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-missing-attribute -->
         <a on:click|preventDefault={() => onItemClicked(item)}>{item}</a>
       </li>
     {/each}
diff --git a/src/lib/components/CreateNewAdventure.svelte b/src/lib/components/CreateNewAdventure.svelte
index 2f76868..4ef3dc4 100644
--- a/src/lib/components/CreateNewAdventure.svelte
+++ b/src/lib/components/CreateNewAdventure.svelte
@@ -151,11 +151,17 @@
           <label for="date">Activity Types (Comma Seperated)</label>
           <input
             type="text"
+            hidden
             id="activityTypes"
             bind:value={activityInput}
             class="input input-bordered w-full max-w-xs"
           />
-          <AutoComplete items={activityTypes} bind:selectedItem={selected} />
+
+          <AutoComplete
+            items={activityTypes}
+            bind:selectedItem={selected}
+            bind:displayValue={activityInput}
+          />
         </div>
         <div>
           <label for="rating">Rating</label>
diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte
index 3a0c135..95c55ba 100644
--- a/src/lib/components/EditModal.svelte
+++ b/src/lib/components/EditModal.svelte
@@ -137,14 +137,19 @@
           />
         </div>
         <div>
-          <label for="date">Activity Types (Comma Seperated)</label>
           <input
             type="text"
+            hidden
             id="activityTypes"
             bind:value={activityInput}
             class="input input-bordered w-full max-w-xs"
           />
-          <AutoComplete items={activityTypes} bind:selectedItem={selected} />
+          <label for="date">Activity Types (Comma Seperated)</label>
+          <AutoComplete
+            items={activityTypes}
+            bind:selectedItem={selected}
+            bind:displayValue={activityInput}
+          />
         </div>
         <div>
           <label for="rating">Rating</label>