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] 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 2009b28d..f1625de0 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 c86d3228..172c83bb 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()