fix(Input): 修复当元素从文档流脱离后，自动宽度计算错误的问题 #6173
Conversation
Cat1007
requested review from
PengYYYYY,
Wesley-0808,
chaishi,
liweijie0812,
uyarn,
zhangpaopao0609 and
zydemail
as code owners
TDesign Component Site Preview Open
|
commit: |
There was a problem hiding this comment.
Pull request overview
This PR fixes an issue where the auto-width calculation for Input components fails when the element is detached from the document flow. The fix introduces @vueuse/core as a new dependency and uses useIntersectionObserver to recalculate the width when the element returns to the viewport.
- Adds
@vueuse/coredependency at version^14.0.0 - Implements
IntersectionObserverto detect when input element returns to the DOM tree - Ensures proper cleanup of the intersection observer in
onBeforeUnmount
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-workspace.yaml | Adds @vueuse/core@^14.0.0 to the deps catalog |
| pnpm-lock.yaml | Updates lock file with @vueuse/core and its dependencies |
| packages/components/package.json | Adds @vueuse/core dependency from catalog |
| internal/utils/src/catalogs.ts | Adds @vueuse/core version specification to catalogs |
| packages/components/input/hooks/useInputWidth.ts | Implements intersection observer to fix auto-width calculation issue |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| '@vueuse/[email protected]': | ||
| resolution: {integrity: sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==} | ||
| peerDependencies: | ||
| vue: ^3.5.0 | ||
|
|
||
| '@vueuse/[email protected]': | ||
| resolution: {integrity: sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==} | ||
|
|
||
| '@vueuse/[email protected]': | ||
| resolution: {integrity: sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==} | ||
| peerDependencies: | ||
| vue: ^3.5.0 |
There was a problem hiding this comment.
The @vueuse/[email protected] package requires vue: ^3.5.0 as a peer dependency, but this project uses [email protected]. This version mismatch may cause runtime issues or installation warnings. Consider using an earlier version of @vueuse/core that supports Vue 3.3.x (e.g., @vueuse/core@^11.0.0 or ^12.0.0) or upgrade Vue to 3.5.x.
| '@vueuse/core@14.0.0': | |
| resolution: {integrity: sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==} | |
| peerDependencies: | |
| vue: ^3.5.0 | |
| '@vueuse/metadata@14.0.0': | |
| resolution: {integrity: sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==} | |
| '@vueuse/shared@14.0.0': | |
| resolution: {integrity: sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==} | |
| peerDependencies: | |
| vue: ^3.5.0 | |
| '@vueuse/core@12.0.1': | |
| resolution: {integrity: sha512-+QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6Q==} # placeholder, will be replaced by pnpm install | |
| peerDependencies: | |
| vue: ^3.2.0 | |
| '@vueuse/metadata@12.0.1': | |
| resolution: {integrity: sha512-+QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6Q==} # placeholder, will be replaced by pnpm install | |
| '@vueuse/shared@12.0.1': | |
| resolution: {integrity: sha512-+QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6QwQn6Q==} # placeholder, will be replaced by pnpm install | |
| peerDependencies: | |
| vue: ^3.2.0 |
| const { stop } = useIntersectionObserver(inputPreRef, ([{ isIntersecting }]) => { | ||
| // 当 dom 元素不存在于文档流时，getComputedStyle 会得到 width === '' | ||
| // width === '' 会使得 input 恢复到默认的宽度，在 auto-width 的 fit-content 模式下，这会导致宽度异常 | ||
| // 因此当元素重新出现在可视区域内时，触发一次计算 | ||
| if (isIntersecting && props.autoWidth) { | ||
| nextTick(() => { | ||
| updateInputWidth(); | ||
| }); | ||
| } | ||
| }); |
There was a problem hiding this comment.
The IntersectionObserver will trigger when the element becomes visible in the viewport, not when it returns to the document flow. An element detached from the document flow (e.g., display: none or visibility: hidden) that is still in the viewport may not trigger the intersection callback as expected. Consider using MutationObserver to watch for style changes or checking visibility state changes more directly.
2 participants
🤔 这个 PR 的性质是？
🔗 相关 Issue
自动宽度设置错误，导致元素错位
💡 需求背景和解决方案
需要再元素返回 DomTree 时，重新触发一次宽度计算，此时
ResizeObserver无法监听，增加IntersectionObserver引入了新的依赖
@vueuse/core📝 更新日志
tdesign-vue-next
☑️ 请求合并前的自查清单