Skip to content

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

@ravindersharma

Description

@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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions