[Feature]: add support for `contentBefore` to Dropdown/Combobox

[stefan-schweiger]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

The Input component currently supports adding additional elements with the contentBefore/contentAfter properties. In Dropdown/Combobox there is a property called expandIcon which does more or less the same thing as contentAfter but there is no way of adding additional content before.

For example this would be useful to add a "magnifying glass" icon to a Combobox with autocomplete to indicate that it's a searchbox.

MS Teams (which kind of works like a ComboBox but has no expandIcon):

Google:

Have you discussed this feature with our team

No response

Additional context

No response

Validations

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[stefan-schweiger]

I had the wrong version selected when creating this. I've changed it in the issue but it would be great if someone could update the label.

[layershifter]

@stefan-schweiger updated 👍

[kevinfairclough]

And also contentAfter ?

[darmageddon]

For workaround, maybe you can use render function in input prop of Combobox to render Input component with contentBefore and contentAfter, and set expandIcon to null. In Dropdown you can use button prop to render Button component, or your custom component with Button component prop. But I don't know whether it's a right thing to do or not.

For Combobox:

input={{
children: (_,inputProps)=> <Input {...inputProps} contentBefore={...}/>
}}

[fpintos]

+1 on adding these properties to combobox/dropdown. I've tried using a render callback but it is not immediately easy - too clunky to simply add an extra icon in the output.

[stefan-schweiger]

keep open

[stefan-schweiger]

keep open

[lriki]

+1!

Microsoft Clipchamp has a dropdown like this. It would be nice to have something similarly easy to use.

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

[yhaskell]

keep open