fix: update filtered tags selection

reallygoodsoftware · Nov 7, 2023 · 03b86a9 · 03b86a9
1 parent b886401
commit 03b86a9
Showing 1 changed file with 20 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -201,6 +201,9 @@ <h2 class="ml-2 text-sm font-semibold font-mono" :text="checkboxValue ? 'ON' : '
         </div>
       </div>
 
+      <script>
+        showSelect = false;
+      </script>
       <div class="p-4 border border-dashed border-black rounded mt-2">
         <div class="flex items-end">
           <div class="flex flex-col w-full">
@@ -349,20 +352,27 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
             type="text"
             class="w-full py-2 px-2"
             :change="filteredTags = allTags.subtract(selectedTags).search(this.value);
-                     selectedTag = filteredTags.first;"
+                     selectedTag = filteredTags.first"
             :enter="selectedTags = selectedTags.add(selectedTag);
                     filteredTags = filteredTags.remove(selectedTag);
-                    selectedTag = filteredTags.first;"
+                    selectedTag = filteredTags.first"
+            :keyup.up="el.index = filteredTags.at(filteredTags.indexOf(selectedTag) - 1) == null ? filteredTags.length : filteredTags.indexOf(selectedTag) - 1;
+                       selectedTag = filteredTags.at(el.index)"
+            :keyup.down="el.index = filteredTags.at(filteredTags.indexOf(selectedTag) + 1) == null ? 0 : filteredTags.indexOf(selectedTag) + 1;
+                         selectedTag = filteredTags.at(el.index)"
           />
 
           <div :clickout="filteredTags = []; selectedTag = null" :class="filteredTags.length ? '' : 'hidden' "  class="bg-white rounded">
             <p class="p-3 font-mono font-semibold mb-2 pb-1 border-b-2 border-gray-500 border-dashed">Search Result:</p>
             <div :each="tag in filteredTags">
               <div
-                :click="selectedTags = selectedTags.add(tag); this.classList.add('hidden')"
+                :click="selectedTags = selectedTags.add(tag);
+                        filteredTags = filteredTags.remove(selectedTag);
+                        selectedTag = filteredTags.first;
+                        this.classList.add('hidden')"
                 :mouseover="selectedTag = tag"
                 :class="selectedTag == tag ? 'bg-blue-100 text-blue-700' : 'text-gray-700'"
-                class="font-mono font-semibold py-2 px-3 rounded hover:bg-blue-100 hover:text-blue-700"
+                class="font-mono font-semibold py-2 px-3 rounded cursor-pointer hover:bg-blue-100 hover:text-blue-700"
               >
                 <span :text="tag"></span>
               </div>
@@ -374,7 +384,12 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
           <div class="flex items-center space-x-2" :each="tag in selectedTags">
             <div class="flex items-center py-0.5 px-2 rounded-full bg-blue-100 text-blue-700" >
               <span :text="tag" class="font-semibold font-mono text-xs"></span>
-              <span class="text-xs text-blue-800 font-semibold ml-2 cursor-pointer" :click="selectedTags = selectedTags.remove(tag)">x</span>
+              <span
+                class="text-xs text-blue-800 font-semibold ml-2 cursor-pointer"
+                :click="selectedTags = selectedTags.remove(tag);
+                        filteredTags = filteredTags.add(tag)">
+                x
+              </span>
             </div>
           </div>
         </div>