ant-design Select自适应时火狐有滚动条后长度较长项出现省略号

webghufk 于 2022-10-25 发布在其他

关注(0)|答案(9)|浏览(397)

I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

<Select defaultValue="lucy" dropdownMatchSelectWidth={false}>
  <Option value="jack">Jack</Option>
  <Option value="lucy1123">Jack</Option>
  <Option value="lucy">Jack</Option>
  <Option value="lucy10">Lucy1111112</Option>
  <Option value="lucy1">Jack</Option>
  <Option value="lucy2">Jack</Option>
  <Option value="lucy3">Jack</Option>
  <Option value="lucy4">Jack</Option>
  <Option value="lucy5">Jack</Option>
  <Option value="lucy6">Jack</Option>
  <Option value="lucy7">Jack</Option>
  <Option value="lucy8">Jack</Option>
  <Option value="lucy9">Jack</Option>
  <Option value="disabled" disabled>
    Disabled
  </Option>
  <Option value="Yiminghe">yiminghe</Option>
</Select>

What is expected?

chrome正常，Firefox的Lucy1111112有省略号

What is actually happening?

自适应时，无省略号

Environment	Info
antd	4.12.3
React	17最新
System	windows10
Browser	Firefox最新

ant-design

来源：https://github.com/ant-design/ant-design/issues/29528

9条答案

按热度按时间

e5nqia271#

赞(0）回复(0）举报 2022-10-25

wtzytmuj2#

这是chrome下，正常

赞(0）回复(0）举报 2022-10-25

ogsagwnx3#

能帮忙测试下 rc-select 在 windows firefox 的效果吗？

赞(0）回复(0）举报 2022-10-25

33qvvth14#

chrome

firefox

code
@xrkffgg rc-select有横向滚动条

赞(0）回复(0）举报 2022-10-25

pqwbnv8z5#

@xrkffgg any update?

赞(0）回复(0）举报 2022-10-25

jaxagkaj6#

Hello @jieny. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @jieny，我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

赞(0）回复(0）举报 2022-10-25

eanckbw97#

I am working on this issue.

赞(0）回复(0）举报 2022-10-25

uajslkp68#

存在环境：Windows Firefox 浏览器
触发原因：dropdownMatchSelectWidth 设置为 false 时 Select 组件不启用虚拟滚动，使用浏览器原生的滚动机制；而 firefox overflow: auto 时存在滚动占用内容区的bug， bugzilla
问题核心：Windows Firefox 浏览器中存在滚动条占用内容区的 bug

解决方法

获取占用内容区的滚动条宽度，给滚动列表增加 padding: var(--scroll-bar) ，手动设置滚动内容区宽度 calc(100% + var(--scroll-bar))

@jieny 临时补丁方案： https://stackblitz.com/edit/react-efdcqd-nu92jq?file=index.js
思路：

获取浏览器滚动条宽度，并赋值给自定义属性 --scroll-bar ，在补丁样式中使用
判断 dropdown-menu 选项列表是否有滚动条，也就是是否处于溢出状态，通过 scrollHeight > clientHeight 判断。
有滚动条时， dropdownClassName 附加上补丁样式类

疑问： `dropdownMatchSelectWidth = false` 时是否可以启用虚拟滚动？

@afc163@zombieJ
相关的 PR 关联的 issue 有：

第一个 issue 似乎与 dropdownMatchSelectWidth 并没有必然联系，可以通过 virtual 手动关闭/开启
第二个 issue 在当前 master 分支搭配 rc-select临时修改版本并未重现，Preview Demo，rc-select 源码修改

如果能够启用虚拟滚动，那么默认情况下可以避免这个问题，而且体验效果会更好。

赞(0）回复(0）举报 2022-10-25

dfuffjeb9#

@curly210102 是的，设置dropdownMatchSelectWidth = false是为了自适应内容最长宽度，但antd默认禁用了虚拟滚动

赞(0）回复(0）举报 2022-10-25

我来回答

ant-design Select自适应时火狐有滚动条后长度较长项出现省略号

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

9条答案

解决方法

疑问： `dropdownMatchSelectWidth = false` 时是否可以启用虚拟滚动？

相关问题

热门标签

最新问答

ant-design Select自适应时火狐有滚动条后长度较长项出现省略号

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

9条答案

解决方法

疑问： dropdownMatchSelectWidth = false 时是否可以启用虚拟滚动？

相关问题

热门标签

最新问答

疑问： `dropdownMatchSelectWidth = false` 时是否可以启用虚拟滚动？