Merge branch 'devangbhavsar89-dev' into dev

Author: AJIXuMuK

docs/documentation/docs/controls/TaxonomyPicker.md

@@ -165,6 +165,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | termActions | ITermActions | no | Allows to execute custom action on the term like e.g. get other term labelsITermActions. |
 | hideTagsNotAvailableForTagging | boolean | no | Specifies if the tags marked with 'Available for tagging' = false should be hidden |
 | validateOnLoad | boolean | no | Specifies if the initial values will be validated, when the component is loaded. Default value is false |
+| validateInput | boolean | no | Specifies if the input text will be validated, when the component focus is changed |
 | hideDeprecatedTags | boolean | no | Specifies if deprecated tags  should be hidden |
 | placeholder | string | no | Short text hint to display in empty picker |
 | errorMessage | string | no | Static error message displayed below the picker. Use `onGetErrorMessage` to dynamically change the error message displayed (if any) based on the current value. `errorMessage` and `onGetErrorMessage` are mutually exclusive (`errorMessage` takes precedence). |

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

@@ -2,6 +2,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 { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
+import { Autofill } from 'office-ui-fabric-react/lib/components/Autofill/Autofill';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import TermPicker from './TermPicker';
 import { IPickerTerms, IPickerTerm } from './ITermPicker';
@@ -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);
   }
 
@@ -100,7 +105,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,
@@ -140,8 +144,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 => {
@@ -275,6 +277,58 @@ 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
@@ -317,7 +371,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
     //
@@ -389,7 +442,8 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       disabled,
       isTermSetSelectable,
       allowMultipleSelections,
-      disabledTermIds, disableChildrenOfDisabledParents,
+      disabledTermIds,
+      disableChildrenOfDisabledParents,
       placeholder,
       panelTitle,
       anchorId,
@@ -418,6 +472,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

@@ -9,6 +9,7 @@ import * as strings from 'ControlStrings';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { ExtensionContext } from '@microsoft/sp-extension-base';
 import { ITermSet } from "../../services/ISPTermStorePickerService";
+import { Autofill } from 'office-ui-fabric-react/lib/components/Autofill/Autofill';
 
 export class TermBasePicker extends BasePicker<IPickerTerm, IBasePickerProps<IPickerTerm>>
 {
@@ -31,6 +32,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> {
@@ -182,22 +185,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;
@@ -217,6 +221,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

@@ -730,6 +730,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'; }}