Skip to content
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

Jump to bottom

feat(components): [select-v2] add fit-input-width prop #18834

Merged
merged 9 commits into from
Dec 24, 2024
Merged

feat(components): [select-v2] add fit-input-width prop #18834

merged 9 commits into from
Dec 24, 2024
+120 −4

Conversation

YiMo1
Copy link
Contributor

@YiMo1 Nov 8, 2024 •
edited
Loading

fix #18812
fix #10652

添加了一个 fit-input-width 属性，如果为 true，则下拉框的宽度与输入框相同，如果为 false，则根据所有 label 的值进行计算自适应宽度，也可以设置为数值以固定宽度。

@pull-request-triage Pull Request Triage
Copy link

👋 @YiMo1, thank you for contributing element-plus.

  • You can comment with /label Components:[component_name] to add a label for which component you are working on.
  • You may join our Discord for staying tuned.

@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 8, 2024

Hello @YiMo1, thank you for contributing to element-plus, please see our guideline to see how to make contribution

@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 8, 2024 •
edited
Loading

@github-actions github-actions bot added the CommitMessage::Qualified Qualified commit message label Nov 8, 2024
@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Nov 8, 2024 •
edited
Loading

Open in Stackblitz

npm i https://pkg.pr.new/element-plus/element-plus@18834

commit: b23cf98

@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 8, 2024 •
edited
Loading

🧪 Playground Preview: https://element-plus.run/?pr=18834
Please comment the example via this playground if needed.

@btea
Copy link
Member

btea commented Nov 8, 2024

We should name this property as fit-input-width like the select component.

Copy link
Contributor Author

We should name this property as fit-input-width like the select component.

如果用户通过 default slot 自定义选项，会导致计算错误，因为只会根据 label 的值进行计算文本长度，所以可能依旧需要一个属性来自定义下拉框宽度，或者我们可以把 fit-input-width 的类型改为 [Number, Boolean] ?

Copy link
Contributor Author

因为 jsdom 没有实现 canvas 接口，所以 select-v2 的单元测试报错，需要安装 canvas 依赖包，但这个依赖包的安装比较麻烦，所以能否暂时先用下面的代码来对这个问题进行回避处理， @btea 认为怎么样？

beforeAll(() => {
  HTMLCanvasElement.prototype.getContext = function () {
    return null
  }
})

Copy link
Contributor Author

Nov 8, 2024 •
edited
Loading

@btea 弄完了，除了翻译，还有什么问题吗？如果翻译不需要非常严谨，那么请允许我使用机器翻译，谢谢。

@btea
Copy link
Member

btea commented Nov 8, 2024

@btea 弄完了，除了翻译，还有什么问题吗？如果翻译不需要非常严谨，那么请允许我使用机器翻译，谢谢。

没事，机器翻译目前水平已经非常高了，完全够用。

@btea
Copy link
Member

btea commented Nov 8, 2024

因为 jsdom 没有实现 canvas 接口，所以 select-v2 的单元测试报错，需要安装 canvas 依赖包，但这个依赖包的安装比较麻烦，所以能否暂时先用下面的代码来对这个问题进行回避处理， @btea 认为怎么样？

beforeAll(() => {
  HTMLCanvasElement.prototype.getContext = function () {
    return null
  }
})

可以试试。

Copy link
Contributor Author

@btea OK，已经全部弄完了。

force-pushed the fix/18812 branch 6 times, most recently from 63a70ca to 1773d74 Compare November 16, 2024 01:28
btea
btea reviewed Nov 18, 2024
View reviewed changes
packages/components/select-v2/src/useSelect.ts Outdated Show resolved Hide resolved
docs/en-US/component/select-v2.md Outdated Show resolved Hide resolved
@YqngQB
Copy link

YqngQB commented Nov 29, 2024 •
edited
Loading

When remote search is enabled, :fit-input-width="false" does not dynamically calculate the dropdown width. It might be necessary to listen for changes in allOptions to trigger the recalculation of the dropdown width.

Reproducible Link:

BUG

Copy link
Contributor Author

When remote search is enabled, :fit-input-width="false" does not dynamically calculate the dropdown width. It might be necessary to listen for changes in allOptions to trigger the recalculation of the dropdown width.

谢谢，我认为只需要监听 filteredOptions 的值就可以了，也就是实际展示的选项。但这里有个比较棘手的地方是filteredOptions 的值每次计算都是返回一个全新的数组，导致 watch 会频繁触发，即使它并没有变化，就比如当 persistent 设置为 false 时反复展开关闭。

Thank you, I think we just need to listen to the value of filteredOptions, which is the actual displayed option. But there is a tricky aspect here that the value of filteredOptions returns a completely new array every time it is calculated, causing watch to frequently trigger even if it does not change, such as repeatedly unfolding and closing when persistent is set to false.

force-pushed the fix/18812 branch 5 times, most recently from 86c00da to d204f0b Compare November 29, 2024 07:52
Copy link
Contributor Author

Nov 29, 2024 •
edited
Loading

如果配置了 allow-create 输入一段长文本，弹窗的宽度并没有变化

When remote search is enabled, :fit-input-width="false" does not dynamically calculate the dropdown width.

这两个Bug都已经解决，虽然增加了一些性能开销，但如果不是特别频繁输入的话，比如一直按着键盘导致 filteredOptions 一直在发生变化，感知也不会明显。当然的话，也许我们应该在文档中指出这一点。 🤔

Both of these bugs have been resolved, although they have increased some performance overhead. However, if the input is not very frequent, such as constantly pressing the keyboard causing the filteredOptions to change, the perception will not be obvious. Of course, perhaps we should point this out in the document.

Closed
force-pushed the fix/18812 branch 2 times, most recently from 74cdc21 to 4e413fc Compare December 23, 2024 00:19
tolking
tolking reviewed Dec 23, 2024
View reviewed changes
docs/en-US/component/select-v2.md Outdated Show resolved Hide resolved
docs/en-US/component/select-v2.md Outdated Show resolved Hide resolved
docs/examples/select-v2/custom-width.vue Outdated Show resolved Hide resolved
@tolking
Copy link
Member

tolking commented Dec 24, 2024

Thanks for your contribution!

@tolking tolking merged commit 2c9d70d into element-plus:dev Dec 24, 2024
12 checks passed
@element-bot element-bot mentioned this pull request Jan 3, 2025
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thinkasany thinkasany thinkasany left review comments

@btea btea btea approved these changes

@tolking tolking tolking approved these changes

Assignees

YiMo1

Labels
CommitMessage::Qualified Qualified commit message Contribution::Community Needs Review
Projects
None yet
Milestone
No milestone
5 participants
@btea @tolking @YqngQB @thinkasany