Skip to content

Datepicker在Dialog中使用,选择结束时间,下面的蓝色高亮线位置不对 #1112

@steve7Zheng

Description

@steve7Zheng

复现:https://stackblitz.com/edit/vitejs-vite-vry2l3rp?file=src%2FApp.tsx&terminal=dev
原因:Datepicker 在挂载瞬间会测量文本宽度来定位高亮条。而放在Dialog中(Dialog用了Portal),当 Datepicker 尝试计算宽度时,它正随着弹窗进行初始化。在这一瞬间,DOM 元素可能还没被真正插入到页面的文档流中,或者正处于弹窗的开启过渡动画里,所以浏览器无法获取到真实的几何尺寸(测得宽度为 0)。而组件内部,后面没有触发重新测量,所以高亮条就“卡”在了错误的位置。
临时Hack解决:https://stackblitz.com/edit/vitejs-vite-9hldgyhm?file=src%2FApp.tsx&terminal=dev

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions