search

react-component / select

React Select
https://select.react-component.now.sh/
MIT License
892 stars 452 forks source link

fix: use getComputedStyle instead getBoundingClientRect. #975

Closed bestlyg closed 10 months ago

bestlyg commented 10 months ago

使用getComputedStyle代替getBoundingClientRect解决issue.

发现issue出现的原因是之前的一次修复使用了getBoundingClientRect 代替offsetWidth，目的是解决offsetWidth只能读取整数的问题，但是这会取值到当前实际的宽度，即300px 乘以 1.5的缩放 总共450px， 当悬浮节点挂载在1.5缩放的div里后，之前设置的450px 会被再乘以1.5倍的缩放。

所以使用getComputedStyle读取width值，他可以读取到select的精确宽度。

vercel[bot] commented 10 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
select ❌ Failed (Inspect) Aug 23, 2023 7:19am
zombieJ commented 10 months ago

这个不行，只是正好 parent 容器也在同一个地方所以 transform 一致了。如果是不同的 holder 使用不同的 transform，这就失效了。应该需要在 rc-trigger 里来修复这个问题。

bestlyg commented 10 months ago

这个不行，只是正好 parent 容器也在同一个地方所以 transform 一致了。如果是不同的 holder 使用不同的 transform，这就失效了。应该需要在 rc-trigger 里来修复这个问题。

我认为如果弹出框在另一个节点下，但是他用了不同的transfrom而展示不同的效果是符合预期的诶，因为selectDropdown只要和select保持同一个宽度就足够了。

比如300px，在同一父节点且父节点存在1.5缩放的时候，他们都需要被放大1.5倍到450px保持一致宽度，而不是现在dropdown被设置成width450px，再被放大1.5。但是当他被挂载到另一个2倍缩放的节点下时，我认为他应该展示成300px的2倍到600px。

如果此时他展示原select的300px宽度，看起来就会很怪，因为select已经被放大到450px了。 如果此时他展示现在select的450px宽度，那逻辑就会很怪，这相当于拿到select的现宽度去展示且不被再次放大。

zombieJ commented 10 months ago

我认为如果弹出框在另一个节点下，但是他用了不同的transfrom而展示不同的效果是符合预期的诶，因为selectDropdown只要和select保持同一个宽度就足够了……

这个就不符合 dropdownMatchSelectWidth 的语义了，它的目的就是让下拉和 Select 相同。容器不同的 transform 下，Popup 也应该和它对齐才对。

zombieJ commented 10 months ago

https://github.com/react-component/select/pull/976 我在这边先修了哈~~