src/routes/space/+page.svelte

@@ -66,7 +66,13 @@
     }
 
     // Tag
-    let filteredTags = $state(availableStudySpaceTags);
+    let tagFilter = $state("");
+    let tagFilterElem = $state<HTMLInputElement>();
+    let filteredTags = $derived(
+        availableStudySpaceTags
+            .filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase()))
+            .filter((tag) => !studySpaceData.tags.includes(tag))
+    );
     let dropdownVisible = $state(false);
 
     function deleteTag(tagName: string) {
@@ -75,22 +81,12 @@
         };
     }
 
-    function filterTags() {
-        const input = document.querySelector(".tagInput") as HTMLInputElement;
-        const filter = input.value.toLowerCase();
-        filteredTags = availableStudySpaceTags
-            .filter((tag) => tag.toLowerCase().includes(filter))
-            .filter((tag) => !studySpaceData.tags.includes(tag));
-    }
-
     function addTag(tagName: string) {
         return () => {
             if (!studySpaceData.tags.includes(tagName)) {
                 studySpaceData.tags.push(tagName);
             }
-            const input = document.querySelector(".tagInput") as HTMLInputElement;
-            input.value = "";
-            filterTags();
+            tagFilter = "";
         };
     }
 </script>
@@ -131,23 +127,37 @@
             type="text"
             name="tagInput"
             class="tagInput"
-            oninput={filterTags}
+            bind:value={tagFilter}
+            bind:this={tagFilterElem}
             onfocus={() => {
                 dropdownVisible = true;
             }}
             onblur={() => {
-                setTimeout(() => {
                 dropdownVisible = false;
-                }, 100); // Delay to allow click on tag
+            }}
+            onkeypress={(event) => {
+                if (event.key === "Enter") {
+                    const tag = filteredTags[0];
+                    if (tag) addTag(tag)();
+                }
             }}
             placeholder="Add tags..."
         />
         {#if dropdownVisible}
             <div class="tagDropdown">
                 {#each filteredTags as avaliableTag (avaliableTag)}
-                    <button class="avaliableTag" onclick={addTag(avaliableTag)} type="button">
-                        {avaliableTag}</button
+                    <button
+                        class="avaliableTag"
+                        onclick={addTag(avaliableTag)}
+                        onmousedown={(e) => {
+                            // Keep input focused
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }}
+                        type="button"
                     >
+                        {avaliableTag}
+                    </button>
                 {/each}
             </div>
         {/if}
@@ -258,8 +268,8 @@
         flex-wrap: wrap;
         position: absolute;
         background-color: #2e4653;
+        box-shadow: 1px 1px 0.5rem rgba(0, 0, 0, 0.5);
         border-radius: 0.5rem;
-        padding: 0.5rem;
         overflow-y: auto;
         max-height: 10rem;
         top: 100%;
@@ -275,6 +285,13 @@
         color: #eaffeb;
         font-size: 0.9rem;
         margin: 0%;
-        padding: 0%;
+        padding: 0 0.8rem 0.4rem;
+    }
+    .avaliableTag:first-child {
+        padding-top: 0.6rem;
+        background-color: hsl(201, 26%, 60%);
+    }
+    .avaliableTag:last-child {
+        padding-bottom: 0.6rem;
     }
 </style>