From 15545654ea1753b7c0841cc08cac9ea79a873abf Mon Sep 17 00:00:00 2001
From: mikiher <mikiher@gmail.com>
Date: Wed, 6 Mar 2024 13:41:54 +0200
Subject: [PATCH 1/2] Alternative input width fix in MultiSelect components

---
 client/components/ui/MultiSelect.vue           | 8 ++++++--
 client/components/ui/MultiSelectQueryInput.vue | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/components/ui/MultiSelect.vue b/client/components/ui/MultiSelect.vue
index 2009b28ddb..f1625de042 100644
--- a/client/components/ui/MultiSelect.vue
+++ b/client/components/ui/MultiSelect.vue
@@ -11,7 +11,7 @@
             </div>
             {{ item }}
           </div>
-          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
+          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" class="h-full bg-primary focus:outline-none px-1 w-6" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
         </div>
       </form>
 
@@ -208,7 +208,10 @@ export default {
         e.stopPropagation()
         e.preventDefault()
       }
-      if (this.$refs.input) this.$refs.input.focus()
+      if (this.$refs.input) { 
+        this.$refs.input.style.width = '24px'
+        this.$refs.input.focus()
+      }
 
       var newSelected = null
       if (this.selected.includes(itemValue)) {
@@ -261,6 +264,7 @@ export default {
       } else {
         this.insertNewItem(this.textInput)
       }
+      if (this.$refs.input) this.$refs.input.style.width = '24px'
     },
     scroll() {
       this.recalcMenuPos()
diff --git a/client/components/ui/MultiSelectQueryInput.vue b/client/components/ui/MultiSelectQueryInput.vue
index c86d322891..172c83bb89 100644
--- a/client/components/ui/MultiSelectQueryInput.vue
+++ b/client/components/ui/MultiSelectQueryInput.vue
@@ -14,7 +14,7 @@
           <div v-if="showEdit && !disabled" class="rounded-full cursor-pointer w-6 h-6 mx-0.5 bg-bg flex items-center justify-center">
             <span class="material-icons text-white hover:text-success pt-px pr-px" style="font-size: 1.1rem" @click.stop="addItem">add</span>
           </div>
-          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
+          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" class="h-full bg-primary focus:outline-none px-1 w-6" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
         </div>
       </form>
 
@@ -228,7 +228,10 @@ export default {
         e.stopPropagation()
         e.preventDefault()
       }
-      if (this.$refs.input) this.$refs.input.focus()
+      if (this.$refs.input) {
+        this.$refs.input.style.width = '24px'
+        this.$refs.input.focus()
+      }
 
       let newSelected = null
       if (this.getIsSelected(item.id)) {
@@ -291,6 +294,7 @@ export default {
           name: this.textInput
         })
       }
+      if (this.$refs.input) this.$refs.input.style.width = '24px'
     },
     scroll() {
       this.recalcMenuPos()

From cd60d0219fbbf4aee293d9957cf9a170a83ef97d Mon Sep 17 00:00:00 2001
From: mikiher <mikiher@gmail.com>
Date: Wed, 6 Mar 2024 14:02:15 +0200
Subject: [PATCH 2/2] Bring back setInputWidth

---
 client/components/ui/MultiSelect.vue           |  9 +++++++++
 client/components/ui/MultiSelectQueryInput.vue | 11 ++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/client/components/ui/MultiSelect.vue b/client/components/ui/MultiSelect.vue
index 7444223e0f..f1625de042 100644
--- a/client/components/ui/MultiSelect.vue
+++ b/client/components/ui/MultiSelect.vue
@@ -110,6 +110,15 @@ export default {
       this.typingTimeout = setTimeout(() => {
         this.currentSearch = this.textInput
       }, 100)
+      this.setInputWidth()
+    },
+    setInputWidth() {
+      setTimeout(() => {
+        var value = this.$refs.input.value
+        var len = value.length * 7 + 24
+        this.$refs.input.style.width = len + 'px'
+        this.recalcMenuPos()
+      }, 50)
     },
     recalcMenuPos() {
       if (!this.menu || !this.$refs.inputWrapper) return
diff --git a/client/components/ui/MultiSelectQueryInput.vue b/client/components/ui/MultiSelectQueryInput.vue
index d5fb04b346..65cc8a6375 100644
--- a/client/components/ui/MultiSelectQueryInput.vue
+++ b/client/components/ui/MultiSelectQueryInput.vue
@@ -126,7 +126,16 @@ export default {
       clearTimeout(this.typingTimeout)
       this.typingTimeout = setTimeout(() => {
         this.search()
-      }, 250)
+      }, 250)      
+      this.setInputWidth()
+    },
+    setInputWidth() {
+      setTimeout(() => {
+        var value = this.$refs.input.value
+        var len = value.length * 7 + 24
+        this.$refs.input.style.width = len + 'px'
+        this.recalcMenuPos()
+      }, 50)
     },
     recalcMenuPos() {
       if (!this.menu || !this.$refs.inputWrapper) return