Search code examples
reactjsfluent-uifluentui-react

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

  • 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.