Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 4 commits into
base: develop
Choose a base branch
from
Draft

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

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f218834
Initial plan
Copilot Jun 17, 2026
576feab
fix(input): prevent width auto causing line breaks in tag-input
Copilot Jun 17, 2026
9efcb3c
fix(input): always set width to 0px when computed width is auto
Copilot Jun 17, 2026
b78ab59
fix(input): use explicit empty string check for computed width
Copilot Jun 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion packages/components/input/hooks/useInputWidth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,14 @@ export function useInputWidth(props: TdInputProps, inputRef: Ref<HTMLInputElemen
const updateInputWidth = () => {
if (!inputPreRef.value || !inputRef.value) return;
// 使用 getComputedStyle 规避 transform 带来的影响
inputRef.value.style.width = getComputedStyle(inputPreRef.value).width;
const computedWidth = getComputedStyle(inputPreRef.value).width;
// 当计算宽度为 auto 或空字符串时，设置为 0px 以避免在多选等场景下换行
// 正常情况下 getComputedStyle 应该返回具体的像素值
if (computedWidth === 'auto' || computedWidth === '') {
inputRef.value.style.width = '0px';
} else {
inputRef.value.style.width = computedWidth;
}
};

useResizeObserver(inputPreRef, () => {
Expand Down