[PR #2714] [MERGED] Fix input width in MultiSelect UI components - replacement solution #3777

Closed
opened 2026-04-25 00:17:01 +02:00 by adam · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/2714
Author: @mikiher
Created: 3/6/2024
Status: Merged
Merged: 3/8/2024
Merged by: @advplyr

Base: masterHead: keyboard-navigation


📝 Commits (4)

📊 Changes

2 files changed (+31 additions, -5 deletions)

View changed files

📝 client/components/ui/MultiSelect.vue (+15 -2)
📝 client/components/ui/MultiSelectQueryInput.vue (+16 -3)

📄 Description

This a a replacement of #2701 (which doesn't fully work), and now it really fixes #2700.

In this solution:

  • We remove the style property from the input element in the template altogether, replacing it with a w-6 tailwind class (which translates to width: 24px).
  • This change (for some reason not obvious to me) enables setInputWidth to work again, so we bring it back.
  • Now we just need to reset the width back to 24px after we're done editting.

I chose to use 24px instead of the original 40px because this is the calculated width of an empty input in setInputWidth

This now works well, fixes the issues that #2701 had.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf/pull/2714 **Author:** [@mikiher](https://github.com/mikiher) **Created:** 3/6/2024 **Status:** ✅ Merged **Merged:** 3/8/2024 **Merged by:** [@advplyr](https://github.com/advplyr) **Base:** `master` ← **Head:** `keyboard-navigation` --- ### 📝 Commits (4) - [`1554565`](https://github.com/advplyr/audiobookshelf/commit/15545654ea1753b7c0841cc08cac9ea79a873abf) Alternative input width fix in MultiSelect components - [`8ec18e8`](https://github.com/advplyr/audiobookshelf/commit/8ec18e8d7b3f6f1833da6a23bae8059890699e1a) Merge branch 'keyboard-navigation' of https://github.com/mikiher/audiobookshelf into keyboard-navigation - [`cd60d02`](https://github.com/advplyr/audiobookshelf/commit/cd60d0219fbbf4aee293d9957cf9a170a83ef97d) Bring back setInputWidth - [`c34e9cd`](https://github.com/advplyr/audiobookshelf/commit/c34e9cde0516d828b85bb0066dd1f9b19494d35c) Merge branch 'master' into keyboard-navigation ### 📊 Changes **2 files changed** (+31 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `client/components/ui/MultiSelect.vue` (+15 -2) 📝 `client/components/ui/MultiSelectQueryInput.vue` (+16 -3) </details> ### 📄 Description This a a replacement of #2701 (which doesn't fully work), and now it really fixes #2700. In this solution: - We remove the style property from the `input` element in the template altogether, replacing it with a `w-6` tailwind class (which translates to `width: 24px`). - This change (for some reason not obvious to me) enables `setInputWidth` to work again, so we bring it back. - Now we just need to reset the width back to 24px after we're done editting. I chose to use 24px instead of the original 40px because this is the calculated width of an empty input in `setInputWidth` This now works well, fixes the issues that #2701 had. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:17:01 +02:00
adam closed this issue 2026-04-25 00:17:01 +02:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#3777