material-components / material-components/material-web
Long words don't get clipped inside the select container
@e111077 is already working on this.
Since Jan 22, 2024.
- Dominant language
- SCSS
- Stars
- 11.3k
- Forks
- 1.1k
- Avg merge
- 20h 28m
- Merged PRs (30d)
- 13
Description
### What is affected?
Component
### Description
A picture worth a thousand words
Whenever a long word is selected, the label inside the select doesn't get clipped so the text extends outside the container.
The expected behavior would be to have the label get clipped (with ellipsis probably?) based on the available space inside the select, prioritizing leading or trailing icons, just like it happens with text fields.
### Reproduction
[Lit repro](https://lit.dev/playground/#project=W3sibmFtZSI6Im1hdGVyaWFsLWltcG9ydHMuanMiLCJjb250ZW50IjoiaW1wb3J0IFwiQG1hdGVyaWFsL3dlYi9zZWxlY3Qvb3V0bGluZWQtc2VsZWN0LmpzXCI7XG5pbXBvcnQgXCJAbWF0ZXJpYWwvd2ViL3NlbGVjdC9maWxsZWQtc2VsZWN0LmpzXCI7XG5pbXBvcnQgXCJAbWF0ZXJpYWwvd2ViL3NlbGVjdC9zZWxlY3Qtb3B0aW9uLmpzXCI7In0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vbWF0ZXJpYWwtaW1wb3J0cy5qc1wiPjwvc2NyaXB0PlxuXG48bWQtb3V0bGluZWQtc2VsZWN0IHN0eWxlPVwid2lkdGg6IDEwMHB4XCI-XG4gIDxtZC1zZWxlY3Qtb3B0aW9uIGFyaWEtbGFiZWw9XCJibGFua1wiPjwvbWQtc2VsZWN0LW9wdGlvbj5cbiAgPG1kLXNlbGVjdC1vcHRpb24gc2VsZWN0ZWQgdmFsdWU9XCJhcHBsZVwiPlxuICAgIDxkaXYgc2xvdD1cImhlYWRsaW5lXCI-cHNldWRvcHNldWRvaHlwb3BhcmF0aHlyb2lkaXNtPC9kaXY-XG4gIDwvbWQtc2VsZWN0LW9wdGlvbj5cbiAgPG1kLXNlbGVjdC1vcHRpb24gdmFsdWU9XCJhcHJpY290XCI-XG4gICAgPGRpdiBzbG90PVwiaGVhZGxpbmVcIj5BcHJpY290PC9kaXY-XG4gIDwvbWQtc2VsZWN0LW9wdGlvbj5cbjwvbWQtb3V0bGluZWQtc2VsZWN0PlxuXG48ZGl2IHN0eWxlPVwid2lkdGg6IDIwMHB4OyBkaXNwbGF5OiBmbGV4OyBmbGV4LWRpcmVjdGlvbjogaG9yaXpvbnRhbDtcIj5cbiAgPG1kLWZpbGxlZC1zZWxlY3Q-XG4gICAgPG1kLXNlbGVjdC1vcHRpb24gYXJpYS1sYWJlbD1cImJsYW5rXCI-PC9tZC1zZWxlY3Qtb3B0aW9uPlxuICAgIDxtZC1zZWxlY3Qtb3B0aW9uIHNlbGVjdGVkIHZhbHVlPVwiYXBwbGVcIj5cbiAgICAgIDxkaXYgc2xvdD1cImhlYWRsaW5lXCI-cHNldWRvcHNldWRvaHlwb3BhcmF0aHlyb2lkaXNtPC9kaXY-XG4gICAgPC9tZC1zZWxlY3Qtb3B0aW9uPlxuICAgIDxtZC1zZWxlY3Qtb3B0aW9uIHZhbHVlPVwiYXByaWNvdFwiPlxuICAgICAgPGRpdiBzbG90PVwiaGVhZGxpbmVcIj5BcHJpY290PC9kaXY-XG4gICAgPC9tZC1zZWxlY3Qtb3B0aW9uPlxuICA8L21kLWZpbGxlZC1zZWxlY3Q-XG4gIFxuICA8bWQtZmlsbGVkLXNlbGVjdD5cbiAgICA8bWQtc2VsZWN0LW9wdGlvbiBhcmlhLWxhYmVsPVwiYmxhbmtcIj48L21kLXNlbGVjdC1vcHRpb24-XG4gICAgPG1kLXNlbGVjdC1vcHRpb24gc2VsZWN0ZWQgdmFsdWU9XCJhcHBsZVwiPlxuICAgICAgPGRpdiBzbG90PVwiaGVhZGxpbmVcIj5wc2V1ZG9wc2V1ZG9oeXBvcGFyYXRoeXJvaWRpc208L2Rpdj5cbiAgICA8L21kLXNlbGVjdC1vcHRpb24-XG4gICAgPG1kLXNlbGVjdC1vcHRpb24gdmFsdWU9XCJhcHJpY290XCI-XG4gICAgICA8ZGl2IHNsb3Q9XCJoZWFkbGluZVwiPkFwcmljb3Q8L2Rpdj5cbiAgICA8L21kLXNlbGVjdC1vcHRpb24-XG4gIDwvbWQtZmlsbGVkLXNlbGVjdD5cbjwvZGl2PlxuIn0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjIuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMS4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4yLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9XQ)
### Workaround
I have not found a workaround
### Is this a regression?
No or unsure. This never worked, or I haven't tried before.
### Affected versions
14.0.0
### Browser/OS/Node environment
Browser: Version 120.0.6099.225 (Official Build) (64-bit)
OS: Windows 11 Pro 22621.3007
Node version: v20.11.0
npm version: 9.6.7
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.