From 0812e189f74cb0cf176acf7924fb3b91a419a093 Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Thu, 7 Nov 2024 03:38:30 +0000
Subject: [PATCH] Add keyboard input to MultiSelect component

---
 client/components/ui/MultiSelect.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/components/ui/MultiSelect.vue b/client/components/ui/MultiSelect.vue
index 37018262..da4bcc13 100644
--- a/client/components/ui/MultiSelect.vue
+++ b/client/components/ui/MultiSelect.vue
@@ -5,9 +5,9 @@
       <form @submit.prevent="submitForm">
         <div ref="inputWrapper" style="min-height: 36px" class="flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-1" :class="wrapperClass" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
           <div v-for="item in selected" :key="item" class="rounded-full px-2 py-1 mx-0.5 my-0.5 text-xs bg-bg flex flex-nowrap break-all items-center relative">
-            <div v-if="!disabled" class="w-full h-full rounded-full absolute top-0 left-0 px-1 bg-bg bg-opacity-75 flex items-center justify-end opacity-0 hover:opacity-100">
+            <div v-if="!disabled" class="w-full h-full rounded-full absolute top-0 left-0 px-1 bg-bg bg-opacity-75 flex items-center justify-end opacity-0 hover:opacity-100" :class="{ 'opacity-100': inputFocused }">
               <span v-if="showEdit" class="material-symbols text-white hover:text-warning cursor-pointer" style="font-size: 1.1rem" @click.stop="editItem(item)">edit</span>
-              <span class="material-symbols text-white hover:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item)">close</span>
+              <span class="material-symbols text-white hover:text-error focus:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item)" @keydown.enter.stop.prevent="removeItem(item)" @focus="setInputFocused(true)" @blur="setInputFocused(false)" tabindex="0">close</span>
             </div>
             {{ item }}
           </div>
@@ -66,7 +66,8 @@ export default {
       typingTimeout: null,
       isFocused: false,
       menu: null,
-      filteredItems: null
+      filteredItems: null,
+      inputFocused: false
     }
   },
   watch: {
@@ -129,6 +130,9 @@ export default {
       }, 100)
       this.setInputWidth()
     },
+    setInputFocused(focused) {
+      this.inputFocused = focused
+    },
     setInputWidth() {
       setTimeout(() => {
         var value = this.$refs.input.value