Taxonomy picker - version upgrade and bug fix (#601)

samples/react-taxonomypicker-panel/README.md

@@ -1,14 +1,14 @@
 # SPFx webpart with Taxonomy picker Office UI Fabric Panel.
 
 ## Summary
-Sample webpart with Single and Multi-select taxonomy pickers using Office UI Fabric panel. The webpart uses the Taxonomy API support available in the SP-PNP-JS.
+Sample webpart with Single and Multi-select taxonomy pickers using Office UI Fabric panel. The webpart uses the Taxonomy API support available in the @pnp/taxonomy.
 
 
 ![TaxonomyPickerPanel webpart](https://github.com/vipulkelkar/sp-dev-fx-webparts/blob/TaxonomyPanelPicker/samples/react-taxonomypicker-panel/assets/TaxonomyPicker.gif)
 
 
 ## Used SharePoint Framework Version 
-![drop](https://img.shields.io/badge/version-GA-green.svg)
+![drop](https://img.shields.io/badge/drop-1.5.1-green.svg)
 
 ## Applies to
 
@@ -17,7 +17,7 @@ Sample webpart with Single and Multi-select taxonomy pickers using Office UI Fab
 
 ## Prerequisites
  
-- sp-pnp-js
+- @pnp/sp
 - Office UI Fabric React
 
 ## Solution
@@ -31,6 +31,7 @@ react-taxonomypicker-panel | Vipul Kelkar  @vipulkelkar
 Version|Date|Comments
 -------|----|--------
 1.0|June 22, 2018|Initial release
+1.1|August 20, 2018|Bug fix and version upgrade
 
 ## Disclaimer
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

samples/react-taxonomypicker-panel/package.json

@@ -11,10 +11,10 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.5.0",
+    "@microsoft/sp-core-library": "1.5.1",
-    "@microsoft/sp-lodash-subset": "1.5.0",
+    "@microsoft/sp-lodash-subset": "1.5.1",
-    "@microsoft/sp-office-ui-fabric-core": "1.5.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.5.1",
-    "@microsoft/sp-webpart-base": "1.5.0",
+    "@microsoft/sp-webpart-base": "1.5.1",
     "@pnp/common": "^1.1.1",
     "@pnp/logging": "^1.1.1",
     "@pnp/odata": "^1.1.1",
@@ -26,13 +26,12 @@
     "@types/react-dom": "15.5.6",
     "@types/webpack-env": "1.13.1",
     "react": "15.6.2",
-    "react-dom": "15.6.2",
+    "react-dom": "15.6.2"
-    "sp-pnp-js": "^3.0.9"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.5.0",
+    "@microsoft/sp-build-web": "1.5.1",
-    "@microsoft/sp-module-interfaces": "1.5.0",
+    "@microsoft/sp-module-interfaces": "1.5.1",
-    "@microsoft/sp-webpart-workbench": "1.5.0",
+    "@microsoft/sp-webpart-workbench": "1.5.1",
     "gulp": "~3.9.1",
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",

samples/react-taxonomypicker-panel/src/webparts/reactTaxonomypickerPanel/ReactTaxonomypickerPanelWebPart.ts

@@ -10,6 +10,7 @@ import {
 import * as strings from 'ReactTaxonomypickerPanelWebPartStrings';
 import ReactTaxonomypickerPanel from './components/ReactTaxonomypickerPanel';
 import { IReactTaxonomypickerPanelProps } from './components/IReactTaxonomypickerPanelProps';
+import { setup as pnpSetup } from "@pnp/common";
 
 export interface IReactTaxonomypickerPanelWebPartProps {
   description: string;
@@ -17,6 +18,15 @@ export interface IReactTaxonomypickerPanelWebPartProps {
 
 export default class ReactTaxonomypickerPanelWebPart extends BaseClientSideWebPart<IReactTaxonomypickerPanelWebPartProps> {
 
+  public onInit(): Promise<void> {
+
+    return super.onInit().then(_ => {
+      pnpSetup({
+        spfxContext: this.context
+      });
+    });
+  }
+
   public render(): void {
     const element: React.ReactElement<IReactTaxonomypickerPanelProps > = React.createElement(
       ReactTaxonomypickerPanel,

samples/react-taxonomypicker-panel/src/webparts/reactTaxonomypickerPanel/components/ReactTaxonomypickerPanel.tsx

@@ -1,71 +1,70 @@
 import * as React from 'react';
 import styles from './ReactTaxonomypickerPanel.module.scss';
 import { IReactTaxonomypickerPanelProps } from './IReactTaxonomypickerPanelProps';
-import { escape } from '@microsoft/sp-lodash-subset';
 
 // Controls
 import TermsPickerComponent, { ITaxonomyTerm } from './TermsPickerComponent';
 import { DefaultButton, IButtonProps, Button } from 'office-ui-fabric-react/lib/Button';
 
-export interface ITaxonomyPickerWebpartState{
+export interface ITaxonomyPickerWebpartState {
-  SingleSelectFieldTerms:ITaxonomyTerm[],
+  SingleSelectFieldTerms: ITaxonomyTerm[],
-  MultiSelectFieldTerms:ITaxonomyTerm[]
+  MultiSelectFieldTerms: ITaxonomyTerm[]
 }
 
 export default class ReactTaxonomypickerPanel extends React.Component<IReactTaxonomypickerPanelProps, ITaxonomyPickerWebpartState> {
-  constructor(props, state:ITaxonomyPickerWebpartState){
+  constructor(props, state: ITaxonomyPickerWebpartState) {
     super(props);
 
     this.state = {
-      SingleSelectFieldTerms:[],
+      SingleSelectFieldTerms: [],
-      MultiSelectFieldTerms:[]
+      MultiSelectFieldTerms: []
 
       // Supply array in the below format for a pre-populated control.
       //SingleSelectFieldTerms:[{name:"<Term-Label>", key="<Term-GUID>"}],
       //MultiSelectFieldTerms:[{name:"<Term-Label>", key="<Term-GUID>"}, {name:"<Term-Label>", key="<Term-GUID>"}]
     }
-    
+
- }
+  }
 
   public render(): React.ReactElement<IReactTaxonomypickerPanelProps> {
     return (
       <div>
-          <div className="ms-Grid">
+        <div className="ms-Grid">
-            <div className="ms-Grid-row">
+          <div className="ms-Grid-row">
-              <div className="ms-Grid-col ms-sm12 ms-lg12">
+            <div className="ms-Grid-col ms-sm12 ms-lg12">
-                  <TermsPickerComponent IsMultiValue={false} TermSetId='<TERM-SET-ID>' LabelText='Single-select field' SelectedTerms={this.state.SingleSelectFieldTerms}/>
+              <TermsPickerComponent IsMultiValue={false} TermSetId='<TERM-SET-ID>' LabelText='Single-select field' SelectedTerms={this.state.SingleSelectFieldTerms} />
-              </div>
-            </div>
-            <div className="ms-Grid-row">
-              <div className="ms-Grid-col ms-sm12 ms-lg12">
-                  <TermsPickerComponent IsMultiValue={true} TermSetId='<TERM-SET-ID>' LabelText='Multi-select field' SelectedTerms={this.state.MultiSelectFieldTerms}/>
-              </div>
             </div>
           </div>
+          <div className="ms-Grid-row">
+            <div className="ms-Grid-col ms-sm12 ms-lg12">
+              <TermsPickerComponent IsMultiValue={true} TermSetId='<TERM-SET-ID>' LabelText='Multi-select field' SelectedTerms={this.state.MultiSelectFieldTerms} />
+            </div>
+          </div>
+        </div>
         <div>
-    </div>
+        </div>
-    <br/>
+        <br />
-    <br/>
+        <br />
         <DefaultButton
-            primary={true}
+          primary={true}
-            text="Show selected values"
+          text="Show selected values"
-            onClick={this._showTaxonomyControlValues.bind(this)}
+          onClick={this._showTaxonomyControlValues.bind(this)}
         />
-     </div>
+      </div>
     );
   }
 
-  private _showTaxonomyControlValues(){
+  private _showTaxonomyControlValues() {
 
-    if(this.state.SingleSelectFieldTerms.length > 0){
+    if (this.state.SingleSelectFieldTerms.length > 0) {
-        alert("Single-Select term Label and GUID : \n" + this.state.SingleSelectFieldTerms[0].name + " - " + this.state.SingleSelectFieldTerms[0].key);
+      alert("Single-Select term Label and GUID : \n" + this.state.SingleSelectFieldTerms[0].name + " - " + this.state.SingleSelectFieldTerms[0].key);
     }
-    if(this.state.MultiSelectFieldTerms.length > 0){
+    if (this.state.MultiSelectFieldTerms.length > 0) {
-        let multiSelectValues = this.state.MultiSelectFieldTerms.map(trm => {
+      let multiSelectValues = this.state.MultiSelectFieldTerms.map(trm => {
-          return trm.name + " - " + trm.key
+        return trm.name + " - " + trm.key
-        }).join(' | ');
+      }).join(' | ');
 
-        alert("Multi-select term Label and GUID : \n" + multiSelectValues); 
+      alert("Multi-select term Label and GUID : \n" + multiSelectValues);
     }
   }
 }

samples/react-taxonomypicker-panel/src/webparts/reactTaxonomypickerPanel/components/TermsPickerComponent.tsx

@@ -1,340 +1,339 @@
 import * as React from 'react';
-import { escape } from '@microsoft/sp-lodash-subset';
+import { taxonomy, ITermStore } from "@pnp/sp-taxonomy";
-import { taxonomy, ITermStore, ITermSet, ITerms, ITerm, ITermData, ITermStoreData} from "@pnp/sp-taxonomy";
 
 // Office ui fabric react controls
-import { TagPicker, ITag } from 'office-ui-fabric-react/lib/components/pickers/TagPicker/TagPicker';
+import { TagPicker } from 'office-ui-fabric-react/lib/components/pickers/TagPicker/TagPicker';
-import { DefaultButton, IButtonProps, Button, ActionButton } from 'office-ui-fabric-react/lib/Button';
+import { DefaultButton, ActionButton } from 'office-ui-fabric-react/lib/Button';
 import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 
 // Represents a taxonomy term. 
-export interface ITaxonomyTerm{
+export interface ITaxonomyTerm {
-    name:string;
+    name: string;
-    key:string;
+    key: string;
 }
 
 // Represents the properties of the term picker component.
-export interface ITermPickerProps{
+export interface ITermPickerProps {
-    IsMultiValue:boolean;
+    IsMultiValue: boolean;
-    TermSetId:string;
+    TermSetId: string;
-    LabelText:string;
+    LabelText: string;
-    SelectedTerms:any[]
+    SelectedTerms: any[]
 }
 
 // Represents the local state of the term picker component.
-export interface ISelectTermsState{
+export interface ISelectTermsState {
-    TaxonomyTerms:ITaxonomyTerm[];
+    TaxonomyTerms: ITaxonomyTerm[];
-    showPanel:boolean;
+    showPanel: boolean;
-    SelectedChoiceGroupTerm:ITaxonomyTerm;
+    SelectedChoiceGroupTerm: ITaxonomyTerm;
-    SelectedTerms:any[];
+    SelectedTerms: any[];
-    PickerText:string;
+    PickerText: string;
 }
 
-let taxonomyOptions:IChoiceGroupOption[] = [];
+let taxonomyOptions: IChoiceGroupOption[] = [];
 
 export default class TermsPickerComponent extends React.Component<ITermPickerProps, ISelectTermsState> {
 
-constructor(props, state:ISelectTermsState){
+    constructor(props, state: ISelectTermsState) {
-    super(props);
+        super(props);
 
-    let initialTaxonomyTermsArray:ITaxonomyTerm[] = [];
+        let initialTaxonomyTermsArray: ITaxonomyTerm[] = [];
+
+        this.state = {
+            TaxonomyTerms: initialTaxonomyTermsArray,
+            showPanel: false,
+            SelectedChoiceGroupTerm: { name: null, key: null },
+            SelectedTerms: [],
+            PickerText: "",
+        }
 
-    this.state = {
-        TaxonomyTerms:initialTaxonomyTermsArray,
-        showPanel:false,
-        SelectedChoiceGroupTerm:{name:null,key:null},
-        SelectedTerms:[],
-        PickerText:"",
     }
-    
- }
 
- // Creates the choice group to be displayed in the pciker panel.
+    // Creates the choice group to be displayed in the pciker panel.
- public createTaxonomyChoiceGroup(){
+    public createTaxonomyChoiceGroup() {
 
-    taxonomyOptions = [];
+        taxonomyOptions = [];
-    if(this.state.TaxonomyTerms.length > 0){
+        if (this.state.TaxonomyTerms.length > 0) {
-        this.state.TaxonomyTerms.forEach(trm=>{
+            this.state.TaxonomyTerms.forEach(trm => {
-            taxonomyOptions.push(
+                taxonomyOptions.push(
-                {
+                    {
-                    key:trm.key,
+                        key: trm.key,
-                    text:trm.name
+                        text: trm.name
-                }
+                    }
-            )
+                )
+            })
+        }
+    }
+
+    public render(): React.ReactElement<ITermPickerProps> {
+
+        this.createTaxonomyChoiceGroup();
+
+        return (
+            <div>
+                <div className="ms-Grid">
+                    <div className="ms-Grid-row">
+                        <div className="ms-Grid-col ms-sm12 ms-lg12">
+                            <Label>{this.props.LabelText}</Label>
+                        </div>
+                    </div>
+                    <div className="ms-Grid-row">
+                        <div className="ms-Grid-col ms-sm8 ms-lg8">
+                            <TagPicker
+                                onResolveSuggestions={this._onFilterChanged.bind(this)}
+                                selectedItems={this.state.SelectedTerms}
+                                getTextFromItem={this._getTextFromItem.bind(this)}
+                                itemLimit={this.props.IsMultiValue ? 100 : 1}
+                                disabled={true}
+                            />
+                        </div>
+                        <div className="ms-Grid-col ms-sm4 ms-lg4">
+                            <ActionButton
+                                primary={true}
+                                onClick={this._onShowPanel.bind(this)}
+                                iconProps={{ iconName: 'MultiSelectMirrored' }}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <Panel
+                    isOpen={this.state.showPanel}
+                    type={PanelType.smallFixedFar}
+                    onDismiss={this._handlePanelDismiss.bind(this)}
+                    headerText="Select terms"
+                    closeButtonAriaLabel="Close"
+                >
+                    <div style={this.state.TaxonomyTerms.length == 0 ? { display: "none" } : {}}>
+                        <ChoiceGroup
+                            options={taxonomyOptions}
+                            onChange={this._onTaxonomyChoiceChange.bind(this)}
+                            required={true}
+                            selectedKey={this.state.SelectedChoiceGroupTerm.key}
+                        />
+                        <br />
+                        <DefaultButton
+                            primary={true}
+                            text="Select"
+                            onClick={this._handleSelectedTaxonomyTerm.bind(this)}
+                        />
+                        <br />
+                        <br />
+                        <TextField label="Selected tags : " value={this.state.PickerText} multiline rows={4} onChanged={this._handlePickerTextChange.bind(this)} />
+                        <br />
+                        <br />
+                        <DefaultButton
+                            primary={true}
+                            text="Done"
+                            onClick={this._handlePickerDone.bind(this)}
+                        />
+                    </div>
+                    <div style={this.state.TaxonomyTerms.length == 0 ? {} : { display: "none" }}>
+                        <Label>No terms available....</Label>
+                    </div>
+                </Panel>
+            </div>
+        );
+    }
+
+    // Component did mount - fetches the available terms from the term set.
+    // If existing terms are passed to the component through the 'SelectedTerms' property, it resolves
+    // the terms from the available set and adds them to the local state.
+    public componentDidMount() {
+
+        this.GetTerms().then(resp => {
+            let setSelectedTerms: ITaxonomyTerm[] = [];
+            if (this.props.SelectedTerms.length > 0 && this.state.TaxonomyTerms.length > 0) {
+                this.props.SelectedTerms.forEach(selectedTrm => {
+
+                    // Checks if the selected terms that was send as a property is valid (ie present in the available terms from termstore)
+                    var checkForExistingValidTerm = this.state.TaxonomyTerms.filter(trm => {
+                        return (trm.name.toLowerCase() === selectedTrm.name.toLowerCase() && trm.key === selectedTrm.key)
+                    })
+                    // If valid, add it to the selected terms of LOCAL STATE
+                    if (checkForExistingValidTerm.length > 0) {
+                        setSelectedTerms.push(selectedTrm);
+                    }
+                })
+
+            }
+            this.setState({
+                SelectedTerms: setSelectedTerms,
+                PickerText: this._getPickerTextString(setSelectedTerms)
+            })
         })
     }
- }
 
-public render(): React.ReactElement<ITermPickerProps> {
+    // Fetches the terms from the term set and sets the TaxonomyTerms (available terms) in the local state.
+    public async GetTerms(): Promise<any> {
 
-    this.createTaxonomyChoiceGroup();
+        try {
+            const store: ITermStore = await taxonomy.termStores.getByName("<TERM_STORE_NAME>");
+            const setWithData = await store.getTermSetById(this.props.TermSetId);
+            const terms = await setWithData.terms.get();
+            let taxonomyTerms: ITaxonomyTerm[] = new Array();
 
-    return (
+            if (terms.length > 0) {
-     <div>
+                terms.forEach(trm => {
-         <div className="ms-Grid">
+                    taxonomyTerms.push({
-            <div className="ms-Grid-row">
+                        name: trm.Name,
-              <div className="ms-Grid-col ms-sm12 ms-lg12">
+                        key: trm.Id.split('(')[1].replace(')/', '')
-              <Label>{this.props.LabelText}</Label>
+                    })
-              </div>
+                });
-            </div>
-            <div className="ms-Grid-row">
-              <div className="ms-Grid-col ms-sm8 ms-lg8">
-              <TagPicker
-                    onResolveSuggestions={this._onFilterChanged.bind(this)}
-                    selectedItems={this.state.SelectedTerms}
-                    getTextFromItem={this._getTextFromItem.bind(this)}
-                    itemLimit={this.props.IsMultiValue ? 100 : 1}
-                    disabled={true}
-              />
-              </div>
-              <div className="ms-Grid-col ms-sm4 ms-lg4">
-                <ActionButton
-                    primary={true}
-                    onClick={this._onShowPanel.bind(this)}
-                    iconProps={{ iconName: 'MultiSelectMirrored' }}
-                />
-              </div>
-            </div>
-          </div>
-         <Panel
-          isOpen={this.state.showPanel}
-          type={PanelType.smallFixedFar}
-          onDismiss={this._handlePanelDismiss.bind(this)}
-          headerText="Select terms"
-          closeButtonAriaLabel="Close"
-        >
-            <div style={this.state.TaxonomyTerms.length == 0 ? {display:"none"} : {}}>
-                <ChoiceGroup
-                        options={taxonomyOptions}
-                        onChange={this._onTaxonomyChoiceChange.bind(this)}
-                        required={true}
-                        selectedKey={this.state.SelectedChoiceGroupTerm.key}
-                    />
-                    <br/>
-                    <DefaultButton
-                        primary={true}
-                        text="Select"
-                        onClick={this._handleSelectedTaxonomyTerm.bind(this)}
-                    />
-                    <br/>
-                    <br/>
-                    <TextField label="Selected tags : " value={this.state.PickerText} multiline rows={4} onChanged={this._handlePickerTextChange.bind(this)}/>
-                    <br/>
-                    <br/>
-                    <DefaultButton
-                        primary={true}
-                        text="Done"
-                        onClick={this._handlePickerDone.bind(this)}
-                    />
-            </div>
-            <div style={this.state.TaxonomyTerms.length == 0 ? {} : {display:"none"}}>
-                    <Label>No terms available....</Label>
-            </div>
-        </Panel>
-     </div>
-    );
-  }
 
-// Component did mount - fetches the available terms from the term set.
+                this.setState({
-// If existing terms are passed to the component through the 'SelectedTerms' property, it resolves
+                    TaxonomyTerms: taxonomyTerms
-// the terms from the available set and adds them to the local state.
-public componentDidMount(){
-
-    this.GetTerms().then(resp => {
-        let setSelectedTerms : ITaxonomyTerm[] = [];
-        if(this.props.SelectedTerms.length > 0 && this.state.TaxonomyTerms.length > 0){
-            this.props.SelectedTerms.forEach(selectedTrm => {
-
-                // Checks if the selected terms that was send as a property is valid (ie present in the available terms from termstore)
-                var checkForExistingValidTerm = this.state.TaxonomyTerms.filter(trm => {
-                    return (trm.name.toLowerCase() === selectedTrm.name.toLowerCase() && trm.key === selectedTrm.key)
                 })
-                // If valid, add it to the selected terms of LOCAL STATE
+            }
-                if(checkForExistingValidTerm.length > 0){
+
-                    setSelectedTerms.push(selectedTrm);
-                }
-            })
-            
         }
+        catch (error) {
+            console.log("An error occurred while fetching the terms from the term store....");
+        }
+        return "";
+    }
+
+    public _onShowPanel() {
+        this.setState({ showPanel: true })
+    }
+
+
+    // This method is called when the panel is dismissed. So on the "DONE" button click,
+    // this method is automatically called. Also on the 'X' button click.
+    // On DONE button click in the picker panel, we only set the showPanel value to false.
+    private _handlePanelDismiss() {
+
+        // Push the data into component property.
+        if (this.state.SelectedTerms.length > 0) {
+            this.props.SelectedTerms.length = 0;
+            this.state.SelectedTerms.forEach(trm => {
+                this.props.SelectedTerms.push(trm);
+            })
+        }
+
+        // Reset the picker text in case it was modified by the user manually.
+        // The next time it is opened, it will show the text of the selected terms.
         this.setState({
-            SelectedTerms:setSelectedTerms,
+            PickerText: this._getPickerTextString(this.state.SelectedTerms),
-            PickerText:this._getPickerTextString(setSelectedTerms)
+        })
-        })  
+    }
-    })
-}
 
-// Fetches the terms from the term set and sets the TaxonomyTerms (available terms) in the local state.
+    private _onFilterChanged = (filterText: string, tagList: { key: string; name: string }[]): { key: string; name: string }[] => {
-public async GetTerms():Promise<any>{
+        return filterText ? this.state.TaxonomyTerms.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0) : [];
+    };
 
-    try{
+    public _getTextFromItem(item: any): any {
-        const store: ITermStore = await taxonomy.termStores.getByName("<TERM_STORE_NAME>");
+        return item.Text;
-        const setWithData = await store.getTermSetById(this.props.TermSetId);
+    }
-        const terms = await setWithData.terms.get();
-        let taxonomyTerms:ITaxonomyTerm[] = new Array();
 
-        if(terms.length > 0){
+    // Sets the selected term on change of term in the picker panel.
-            terms.forEach(trm => {
+    private _onTaxonomyChoiceChange = (ev: React.FormEvent<HTMLInputElement>, option: any): void => {
-                taxonomyTerms.push({
+
-                    name:trm.Name,
+        this.setState({
-                    key:trm.Id.split('(')[1].replace(')/','')
+            SelectedChoiceGroupTerm: { name: option.text, key: option.key }
-                })
+        })
-            });
+    }
+
+
+    private _handleSelectedTaxonomyTerm = (): void => {
+
+        let selectedTerms: ITaxonomyTerm[] = this.state.SelectedTerms;
+
+        // Handles the state and picker textbox if the field is multi-select
+        if (this.props.IsMultiValue) {
+            selectedTerms = this.state.SelectedTerms;
+
+            // Check if the term is already selected
+            let existingTerm = selectedTerms.filter(trm => {
+                return trm.name.toLowerCase() === this.state.SelectedChoiceGroupTerm.name.toLowerCase()
+            })
+            if (existingTerm.length == 0) {
+                selectedTerms.push(
+                    {
+                        name: this.state.SelectedChoiceGroupTerm.name,
+                        key: this.state.SelectedChoiceGroupTerm.key
+                    }
+                );
+
+            }
 
             this.setState({
-                TaxonomyTerms:taxonomyTerms
+                SelectedTerms: selectedTerms,
+                PickerText: this._getPickerTextString(this.state.SelectedTerms)
             })
         }
-        
+        // Handles the state and picker textbox if the field is single-select
-    }
+        else {
-    catch(error){
+            selectedTerms = [];
-        console.log("An error occurred while fetching the terms from the term store....");
-    }
-    return "";
-  }
-
-public _onShowPanel(){
-    this.setState({ showPanel:true })
-}
-
- 
-// This method is called when the panel is dismissed. So on the "DONE" button click,
-// this method is automatically called. Also on the 'X' button click.
-// On DONE button click in the picker panel, we only set the showPanel value to false.
-private _handlePanelDismiss(){
-      
-    // Push the data into component property.
-    if(this.state.SelectedTerms.length > 0){
-        this.props.SelectedTerms.length = 0;
-        this.state.SelectedTerms.forEach(trm => {
-            this.props.SelectedTerms.push(trm);
-        })
-    }
-
-    // Reset the picker text in case it was modified by the user manually.
-    // The next time it is opened, it will show the text of the selected terms.
-    this.setState({
-        PickerText:this._getPickerTextString(this.state.SelectedTerms),
-    })
-  }
-
-private _onFilterChanged = (filterText: string,tagList: {key: string; name: string }[]): {key: string; name: string }[] => {
-    return filterText ? this.state.TaxonomyTerms.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0) : [];
-};
-
-public _getTextFromItem(item:any):any{
-    return item.Text;
-}
-
-// Sets the selected term on change of term in the picker panel.
-private _onTaxonomyChoiceChange = (ev: React.FormEvent<HTMLInputElement>, option: any): void => {
-    
-    this.setState({
-        SelectedChoiceGroupTerm:{ name:option.text, key:option.key }
-    })
-  }
-
-
-private _handleSelectedTaxonomyTerm = (): void => {
-    
-    let selectedTerms:ITaxonomyTerm[] = this.state.SelectedTerms;
-
-    // Handles the state and picker textbox if the field is multi-select
-    if(this.props.IsMultiValue){
-        selectedTerms = this.state.SelectedTerms;
-
-        // Check if the term is already selected
-        let existingTerm = selectedTerms.filter(trm => {
-            return trm.name.toLowerCase() === this.state.SelectedChoiceGroupTerm.name.toLowerCase()
-        })
-        if(existingTerm.length == 0){
             selectedTerms.push(
                 {
-                    name:this.state.SelectedChoiceGroupTerm.name, 
+                    name: this.state.SelectedChoiceGroupTerm.name,
-                    key:this.state.SelectedChoiceGroupTerm.key
+                    key: this.state.SelectedChoiceGroupTerm.key
                 }
             );
-    
+
+            this.setState({
+                SelectedTerms: selectedTerms,
+                PickerText: selectedTerms[0].name
+            })
         }
-       
+    }
+
+    // Handle the close panel on "Done" button click
+    // When the showPanel is set to false, the onDismiss method will be automatically executed.
+    private _handlePickerDone = (): void => {
         this.setState({
-            SelectedTerms:selectedTerms,
+            showPanel: false
-            PickerText:this._getPickerTextString(this.state.SelectedTerms)
         })
     }
-    // Handles the state and picker textbox if the field is single-select
-    else{
-        selectedTerms = [];
-        selectedTerms.push(
-            {
-                name:this.state.SelectedChoiceGroupTerm.name, 
-                key:this.state.SelectedChoiceGroupTerm.key
-            }
-        );
 
-        this.setState({
+    // Generates the ';' separated string for selected terms
-            SelectedTerms:selectedTerms,
+    private _getPickerTextString(selectedTerms: any[]): string {
-            PickerText:selectedTerms[0].name
-        })
-    }
-  }
 
-// Handle the close panel on "Done" button click
+        let pickerTextString: string = "";
-// When the showPanel is set to false, the onDismiss method will be automatically executed.
-private _handlePickerDone = (): void => {
-    this.setState({
-        showPanel:false
-    })
-}
 
-  // Generates the ';' separated string for selected terms
+        if (selectedTerms.length > 0) {
-  private _getPickerTextString(selectedTerms:any[]):string{
+            pickerTextString = selectedTerms.map(trm => {
+                return trm.name
+            }).join('; ')
+        }
 
-    let pickerTextString:string = "";
+        return pickerTextString;
-
-    if(selectedTerms.length > 0){
-        pickerTextString = selectedTerms.map(trm => {
-            return trm.name
-        }).join('; ')
     }
 
-    return pickerTextString;
+    // Handles manual change to the picker control.
-  }
+    private _handlePickerTextChange(value) {
 
-  // Handles manual change to the picker control.
+        if (value !== "") {
-  private _handlePickerTextChange(value){
 
-    if(value !== ""){
+            let selectedTerms: any[] = [];
-        
+            let pickerSelectedTerms: any[] = value.split(';');
-        let selectedTerms:any[] = [];
-        let pickerSelectedTerms:any[] = value.split(';');
 
-        pickerSelectedTerms.forEach((pickerSelectedTerm:string) => {
+            pickerSelectedTerms.forEach((pickerSelectedTerm: string) => {
-            pickerSelectedTerm = pickerSelectedTerm.trim();
+                pickerSelectedTerm = pickerSelectedTerm.trim();
-            let filteredTerm = this.state.TaxonomyTerms.filter((trm)=>{
+                let filteredTerm = this.state.TaxonomyTerms.filter((trm) => {
-                return trm.name.toLowerCase() == pickerSelectedTerm.toLowerCase()
+                    return trm.name.toLowerCase() == pickerSelectedTerm.toLowerCase()
+                })
+
+                // Push the term only if it resolved.
+                if (filteredTerm.length > 0) {
+                    selectedTerms.push(filteredTerm[0]);
+                }
             })
 
-            // Push the term only if it resolved.
+            this.setState({
-            if(filteredTerm.length > 0){
+                PickerText: value,
-                selectedTerms.push(filteredTerm[0]);
+                SelectedTerms: selectedTerms
-            }
+            })
-        })
+        }
+        else {
+            this.setState({
+                PickerText: value,
+                SelectedTerms: []
+            })
+        }
 
-        this.setState({
-            PickerText:value,
-            SelectedTerms:selectedTerms
-        })
     }
-    else{
+
-        this.setState({
-            PickerText:value,
-            SelectedTerms:[]
-        })
-    }
-    
-  }
-  
 }