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

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!

Solution 1:^[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Marko Savic

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

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]