Fix for #728: Show an error message for an invalid/unresolved input inside taxonomy picker control (v1-release)

Author: Devang Bhavsar

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -84,6 +84,11 @@ export interface ITaxonomyPickerProps  {
    */
   validateOnLoad?: boolean;
 
+  /**
+   * Specifies if the input text will be validated, when the component focus is changed
+   */
+  validateInput?: boolean;
+
   /**
    * The method is used to get the validation error message and determine whether the input value is valid or not.
    * Mutually exclusive with the static string errorMessage (it will take precedence over this).

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PrimaryButton, DefaultButton, IconButton } from 'office-ui-fabric-react/lib/Button';
 import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
+import { Autofill } from 'office-ui-fabric-react/lib/components/Autofill/Autofill';
 import { Spinner, SpinnerType } from 'office-ui-fabric-react/lib/Spinner';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import TermPicker from './TermPicker';
@@ -32,6 +33,7 @@ export const TERM_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQC
 export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxonomyPickerState> {
   private termsService: SPTermStorePickerService;
   private previousValues: IPickerTerms = [];
+  private invalidTerm: string = null;
   private cancel: boolean = true;
 
   /**
@@ -55,6 +57,9 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     this.onSave = this.onSave.bind(this);
     this.termsChanged = this.termsChanged.bind(this);
     this.termsFromPickerChanged = this.termsFromPickerChanged.bind(this);
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+
     this.termsService = new SPTermStorePickerService(this.props, this.props.context);
   }
 
@@ -101,7 +106,6 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
   * it checks, if all entries still exist in term store. if allowMultipleSelections is true. it have to validate all values
   */
   private async validateTerms(): Promise<void> {
-
     const {
       hideDeprecatedTags,
       hideTagsNotAvailableForTagging,
@@ -141,8 +145,6 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
    * Loads the list from SharePoint current web site
    */
   private loadTermStores(): void {
-
-
     if (this.props.termActions && this.props.termActions.initialize) {
       this.props.termActions.initialize(this.termsService);
       // this.props.termActions.actions.forEach(x => {
@@ -276,7 +278,59 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     this.validate(terms);
   }
 
+  /**
+   * Shows an error message for any invalid input inside taxonomy picker control
+   */
+  private validateInputText(): void {
+    // Show error message, if any unresolved value exists inside taxonomy picker control
+    if (!!this.invalidTerm) {
+      // An unresolved value exists
+      this.setState({
+        errorMessage: strings.TaxonomyPickerInvalidTerms.replace('{0}', this.invalidTerm)
+      });
+    }
+    else {
+      // There are no unresolved values
+      this.setState({
+        errorMessage: null
+      });
+    }
+  }
+
+  /**
+   * Triggers when input of taxonomy picker control changes
+   */
+  private onInputChange(input: string): string {
+    if (!input) {
+      const { validateInput } = this.props;
+      if (!!validateInput) {
+        // Perform validation of input text, only if taxonomy picker is configured with validateInput={true} property.
+        this.invalidTerm = null;
+        this.validateInputText();
+      }
+    }
+    return input;
+  }
 
+  /**
+   * Triggers when taxonomy picker control loses focus
+   */
+  private onBlur(event: React.FocusEvent<HTMLElement | Autofill>): void {
+    const { validateInput } = this.props;
+    if (!!validateInput) {
+      // Perform validation of input text, only if taxonomy picker is configured with validateInput={true} property.
+      const target: HTMLInputElement = event.target as HTMLInputElement;
+      const targetValue = !!target ? target.value : null;
+      if (!!targetValue) {
+        this.invalidTerm = targetValue;
+      }
+      else {
+        this.invalidTerm = null;
+      }
+      this.validateInputText();
+    }
+  }
+  
   /**
    * Gets the given node position in the active nodes collection
    * @param node
@@ -318,7 +372,6 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
   }
 
   private validate = async (value: IPickerTerms): Promise<void> => {
-
     //
     // checking if there are any invalid nodes left after initial validation
     //
@@ -390,7 +443,8 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       disabled,
       isTermSetSelectable,
       allowMultipleSelections,
-      disabledTermIds, disableChildrenOfDisabledParents,
+      disabledTermIds, 
+      disableChildrenOfDisabledParents,
       placeholder,
       panelTitle,
       anchorId,
@@ -419,6 +473,8 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
               value={activeNodes}
               isTermSetSelectable={isTermSetSelectable}
               onChanged={this.termsFromPickerChanged}
+              onInputChange={this.onInputChange}
+              onBlur={this.onBlur}
               allowMultipleSelections={allowMultipleSelections}
               disabledTermIds={disabledTermIds}
               disableChildrenOfDisabledParents={disableChildrenOfDisabledParents}

src/controls/taxonomyPicker/TermPicker.tsx

@@ -10,6 +10,7 @@ import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { ExtensionContext } from '@microsoft/sp-extension-base';
 import { ITermSet } from "../../services/ISPTermStorePickerService";
 import { EmptyGuid } from '../../Common';
+import { Autofill } from 'office-ui-fabric-react/lib/components/Autofill/Autofill';
 
 export class TermBasePicker extends BasePicker<IPickerTerm, IBasePickerProps<IPickerTerm>>
 {
@@ -32,6 +33,8 @@ export interface ITermPickerProps {
   placeholder?: string;
 
   onChanged: (items: IPickerTerm[]) => void;
+  onInputChange: (input: string) => string;
+  onBlur: (ev: React.FocusEvent<HTMLElement | Autofill>) => void;
 }
 
 export default class TermPicker extends React.Component<ITermPickerProps, ITermPickerState> {
@@ -183,22 +186,23 @@ export default class TermPicker extends React.Component<ITermPickerProps, ITermP
     }
   }
 
-
   /**
    * gets the text from an item
    */
   private onGetTextFromItem(item: any): any {
     return item.name;
   }
 
-    /**
+  /**
    * Render method
    */
   public render(): JSX.Element {
     const {
       disabled,
       value,
       onChanged,
+      onInputChange,
+      onBlur,
       allowMultipleSelections,
       placeholder
     } = this.props;
@@ -218,6 +222,8 @@ export default class TermPicker extends React.Component<ITermPickerProps, ITermP
           defaultSelectedItems={value}
           selectedItems={terms}
           onChange={onChanged}
+          onInputChange={onInputChange}
+          onBlur={onBlur}
           itemLimit={!allowMultipleSelections ? 1 : undefined}
           className={styles.termBasePicker}
           inputProps={{

src/loc/en-us.ts

@@ -46,6 +46,7 @@ define([], () => {
     "TaxonomyPickerInLabel": "in",
     "TaxonomyPickerTermSetLabel": "Term Set",
     "TaxonomyPickerTermsNotFound": "The next selected term(s) could not be found in the term store: {0}",
+    "TaxonomyPickerInvalidTerms": "Please fix invalid term(s): {0}",
 
     peoplePickerComponentTooltipMessage: "People Picker",
     peoplePickerComponentErrorMessage: "Required Field",

src/loc/mystrings.d.ts

@@ -27,6 +27,7 @@ declare interface IControlStrings {
   TaxonomyPickerInLabel: string;
   TaxonomyPickerTermSetLabel: string;
   TaxonomyPickerTermsNotFound: string;
+  TaxonomyPickerInvalidTerms: string;
 
   ListItemPickerSelectValue: string;
 

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -720,6 +720,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             onChange={this.onServicePickerChange}
             isTermSetSelectable={false}
             placeholder="Select service"
+            // validateInput={true}   /* Uncomment this to enable validation of input text */
             required={true}
             errorMessage='this field is required'
             onGetErrorMessage={(value) => { return 'comment errorMessage to see this one'; }}