Skip to content

fix(input): handle 'auto' width in tag-input to prevent line breaks - #6734

Draft
Wesley-0808 with Copilot wants to merge 4 commits into
developfrom
copilot/fix-dropdown-input-width
Draft

fix(input): handle 'auto' width in tag-input to prevent line breaks#6734
Wesley-0808 with Copilot wants to merge 4 commits into
developfrom
copilot/fix-dropdown-input-width

Conversation

Copilot AI commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Multi-select components with pre-filled tags sometimes render with width: auto on the internal input, causing unwanted line breaks.

Changes

packages/components/input/hooks/useInputWidth.ts

  • Check for 'auto' or '' from getComputedStyle
  • Set to '0px' instead of applying invalid width value
  • Prevents input from consuming space in tag layouts
const computedWidth = getComputedStyle(inputPreRef.value).width;
if (computedWidth === 'auto' || computedWidth === '') {
  inputRef.value.style.width = '0px';
} else {
  inputRef.value.style.width = computedWidth;
}

Affects autoWidth behavior in tag-input/select-input components when tags are present.

Copilot AI added 3 commits June 17, 2026 03:56
When autoWidth is enabled and computed width is 'auto', set width
to '0px' if input has no value and no placeholder to prevent
unwanted line breaks in multi-select scenarios.
Simplified logic to always set width to '0px' when getComputedStyle
returns 'auto', fixing line break issues in multi-select scenarios.
Addresses code review feedback.
Changed condition from `!computedWidth` to `computedWidth === ''`
to be more explicit and address code review feedback.
Copilot AI changed the title [WIP] Fix dropdown input width issue in multi-select fix(input): handle 'auto' width in tag-input to prevent line breaks Jun 17, 2026
Copilot AI requested a review from Wesley-0808 June 17, 2026 04:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants