How to get all selected values of Tag Picker in Fluent UI

Question

In the docs, some of the props do not exist on the component, so I guess it's outdated.

I have a TagPicker component, I'm using the Tag Picker with inline suggestions one.

<TagPicker
    onResolveSuggestions={filterSuggestedTags}
    getTextFromItem={getTextFromItem}
    pickerSuggestionsProps={{
      suggestionsHeaderText: 'Tags',
      noResultsFoundText: 'No tags found',
    }}
    pickerCalloutProps={{ doNotLayer: true }}
    inputProps={inputProps}
  />

And I want its value to be stored in a state (as an array of strings). I tried to find events of selecting and removing but couldn't find them. Thanks in advance!

score 2 · Accepted Answer · answered May 06 '22 at 10:43

Use onChange event for add/remove items and selectedItems for component state.

// Import ITag interface from FluentUI.
const [selectedItems, setSelectedItems] = useState<ITag[]>([])

<TagPicker
  ...
  onChange={items => items && setSelectedItems(items)}
  selectedItems={selectedItems}
/>

Codepen working example.

How to get all selected values of Tag Picker in Fluent UI

1 Answers1