Tag Picker in SPFx

Question

I am trying to use the FluentUI Tag picker on https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers for one of my projects

Being a newbie , I am experiencing challenges implementing this on SPFx.

Also googled a lot for examples , no luck

I would really appreciate if anyone could help me with its implementation or examples if any

Thanks in advance

Answer 1

Simple example:

import * as React from 'react';
import styles from './OfficeUispfx.module.scss';
import { IOfficeUispfxProps } from './IOfficeUispfxProps';
import { escape } from '@microsoft/sp-lodash-subset';

import {
  TagPicker,
  IBasePicker,
  ITag,
  IInputProps,
  IBasePickerSuggestionsProps,
} from 'office-ui-fabric-react/lib/Pickers';
import { Toggle, IToggleStyles } from 'office-ui-fabric-react/lib/Toggle';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
import { useBoolean } from '@uifabric/react-hooks';

export default class OfficeUispfx extends React.Component<IOfficeUispfxProps, any> {
  
  
  public render(): React.ReactElement<IOfficeUispfxProps> {    
    
    const rootClass = mergeStyles({
      maxWidth: 500,
    });
    
    const toggleStyles: Partial<IToggleStyles> = { root: { margin: '10px 0' } };
    
    const inputProps: IInputProps = {
      onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur called'),
      onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus called'),
      'aria-label': 'Tag picker',
    };
    
    const pickerSuggestionsProps: IBasePickerSuggestionsProps = {
      suggestionsHeaderText: 'Suggested tags',
      noResultsFoundText: 'No color tags found',
    };
    
    const testTags: ITag[] = [
      'black',
      'blue',
      'brown',
      'cyan',
      'green',
      'magenta',
      'mauve',
      'orange',
      'pink',
      'purple',
      'red',
      'rose',
      'violet',
      'white',
      'yellow',
    ].map(item => ({ key: item, name: item }));
    
    const listContainsTagList = (tag: ITag, tagList?: ITag[]) => {
      if (!tagList || !tagList.length || tagList.length === 0) {
        return false;
      }
      return tagList.some(compareTag => compareTag.key === tag.key);
    };
    
    const filterSuggestedTags = (filterText: string, tagList: ITag[]): ITag[] => {
      return filterText
        ? testTags.filter(
            tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0 && !listContainsTagList(tag, tagList),
          )
        : [];
    };
    
    const filterSelectedTags = (filterText: string, tagList: ITag[]): ITag[] => {
      return filterText ? testTags.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0) : [];
    };
    
    const getTextFromItem = (item: ITag) => item.name;
    
    
   
  
    return (
      <div className={ styles.officeUispfx }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
            
          </div>
        </div>
        <TagPicker
        removeButtonAriaLabel="Remove"
        onResolveSuggestions={filterSuggestedTags}
        getTextFromItem={getTextFromItem}
        pickerSuggestionsProps={pickerSuggestionsProps}
        itemLimit={2}
       
        inputProps={inputProps}
      />
     
      
      
      
      </div>
    );
  }
   
}

Test Result: Another demo:
https://github.com/RaspeR87/sp-dev-fx-webparts/blob/master/speaker-webpart/src/webparts/speakerSubmission/components/SpeakerSubmission.tsx