mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-05-30 23:40:40 +02:00
[Bug]: Author text input gets clipped when editing book details #1790
Assignees
adam (Adam Melkus)
Clear assignees
adam (Adam Melkus)
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: starred/audiobookshelf#1790
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @mikiher on GitHub (Mar 3, 2024).
Describe the issue
When you manually type a new author name, after typing a few letters, the ending gets clipped and you don't see what you type until you press Enter (and then the Authors field is populated correctly with the full author name you typed).
While typing, all the letters you typed briefly flicker on and then get truncated.
Steps to reproduce the issue
Open a book's details tab
Go the Authors field
Add a new author by typing it manually (e.g. "J. K. Rowling")
After typing the name, but before hitting Enter, the field looks like this:
After hitting Enter, The field is correctly populated, like this:
Audiobookshelf version
v2.8.0
How are you running audiobookshelf?
Built from source
@advplyr commented on GitHub (Mar 3, 2024):
I noticed that recently also. I may have broken something because that wasn't always the case.
@mikiher commented on GitHub (Mar 3, 2024):
Analysis:
In MultiSelectQueryInput.vue, when a new letter is pressed, we call setInputWidth, which registers a function to recalcualte and set the width after 50 ms. That function is called and sets a correct value.
However after that, some other code (I have not identified exactly which, but I suspect it is some internal Vue framework code, perhaps the one that takes care of reacting to the input box v-model change) is changing the width back to its default value, which is 40px.
The above causes for the flicker (because the width property changes value twice) and the truncation (since the final width value is always 40px).
@mikiher commented on GitHub (Mar 3, 2024):
Resolution:
After trying to fix this by increasing the setTimout time (which works but looks ugly, and also flickers), I found that
widthcan have afit-contentvalue. I set the initial element style towidth: fit-content, and removed the call to setInputWidth altogether. This seems to work perfectly.I will send a PR.
@mikiher commented on GitHub (Mar 3, 2024):
I noticed that the Geners, Tags, and Narrators suffer from the same issue (in MultiSelect.vue). I will fix there as well.
@advplyr commented on GitHub (Mar 17, 2024):
Fixed in v2.8.1