fluentui
fluentui copied to clipboard
[Bug]: Icon/Label Dropdown with long names are overflown
Library
React Components / v9 (@fluentui/react-components)
System Info
System:
OS: Windows 10 10.0.22000
CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900K @ 3.50GHz
Memory: 32.52 GB / 63.62 GB
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.42), ChromiumDev (107.0.1379.1)
Internet Explorer: 11.0.22000.120
Are you reporting Accessibility issue?
no
Reproduction
https://codepen.io/andr33/pen/eYrRWKR
Bug Description
Actual Behavior
The text overflows in the label when using an icon. Both for the selected item and the rest of the dropdown items.

Expected Behavior
The text should be cropped by default or allow access to the text label in order to allow wrapping options by the user. Similar to the dropdown without icon which by default it crops the text: https://codepen.io/avenezia/pen/abLGbKp
Logs
No response
Requested priority
High
Products/sites affected
Power Query
Are you willing to submit a PR to fix?
no
Validations
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a minimal reproducible example of the bug.