TagPicker needs to filter items when TagPickerOption contains children other then Text (control or only string).

[ravindersharma]

Library

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

Describe the feature that you would like added

Current working : When we use the options as string Array in TagPicker, pass TagPickerOption as Given below its filter feature working fine.
<TagPickerOption secondaryContent="Microsoft FTE" media={ <Avatar shape="square" aria-hidden name={option} color="colorful" /> } value={option} key={option} > {option} </TagPickerOption>

Needed Feature: In case we are using an object Array or even string Array an pass a Persona Control as children for TagPickerOption it stops filtering item.

Expected Issue: Since current working example have String Array and Have Text as children for TagPickerOption it search easily. but in Persona case we don't have any text property for TagPickerOption to pass. In that case it stops working.
<TagPickerOption value={option} key={option}> <Persona avatar={{ color: 'colorful', 'aria-hidden': true, }} name={option} secondaryText="Microsoft FTE" /> </TagPickerOption>

Please check Following example for clarity:
https://stackblitz.com/edit/sknhsb-7t6uwy?file=src%2Fexample.tsx

Here is Related issue : #26652

Have you discussed this feature with our team

No response

Additional context

No response

Validations

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

Priority

High

[bsunderhus]

I'm not sure I follow what do you mean by filtering in the example you provided, there's no filtering happening anywhere...

Do you mean that the focus is not properly focusing in the TagPickerOption that is the closest to the provided input?

[ravindersharma]

Hi @bsunderhus , yes you are right, here I mean filtering feature is, what currently shown as Focus for TagPicker when you search for any user name in example code. For example, if you type Ja you will get "Jane Doe" user focused in "Select Employees with Text" TagPicker.

But if you do same in "Select Employees With Persona" TagPicker you will get no Focused options.

[pradeept95]

Hi @bsunderhus , Combobox have text props in there option to handle complex option scenario but TagPickerOption lags that. I think this is the main reason we are seeing this warning in console.

I believe it is main reason for the above issue as well.

https://react.fluentui.dev/?path=/docs/components-combobox--default#complex-options