Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-03-19 00:18:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Alternative input width fix in MultiSelect components

Browse Source
This commit is contained in:
mikiher 2024-03-06 13:41:54 +02:00
parent b4eed3bad2
commit 15545654ea
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/components/ui/MultiSelect.vue
View File

@ -11,7 +11,7 @@
</div> </div>
{{ item }} {{ item }}
</div> </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> </div>
</form> </form>
@ -208,7 +208,10 @@ export default {
e.stopPropagation() e.stopPropagation()
e.preventDefault() 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 var newSelected = null
if (this.selected.includes(itemValue)) { if (this.selected.includes(itemValue)) {
@ -261,6 +264,7 @@ export default {
} else { } else {
this.insertNewItem(this.textInput) this.insertNewItem(this.textInput)
} }
if (this.$refs.input) this.$refs.input.style.width = '24px'
}, },
scroll() { scroll() {
this.recalcMenuPos() this.recalcMenuPos()

8
client/components/ui/MultiSelectQueryInput.vue
View File

@ -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"> <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> <span class="material-icons text-white hover:text-success pt-px pr-px" style="font-size: 1.1rem" @click.stop="addItem">add</span>
</div> </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> </div>
</form> </form>
@ -228,7 +228,10 @@ export default {
e.stopPropagation() e.stopPropagation()
e.preventDefault() 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 let newSelected = null
if (this.getIsSelected(item.id)) { if (this.getIsSelected(item.id)) {
@ -291,6 +294,7 @@ export default {
name: this.textInput name: this.textInput
}) })
} }
if (this.$refs.input) this.$refs.input.style.width = '24px'
}, },
scroll() { scroll() {
this.recalcMenuPos() this.recalcMenuPos()