Error message will be always displayed if validateOnLoad is set to true and there are invalid terms

Author: AJIXuMuK

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -130,6 +130,7 @@ export interface ITaxonomyPickerState {
   openPanel?: boolean;
   loaded?: boolean;
   activeNodes?: IPickerTerms;
+  invalidNodeIds?: string[];
 }
 
 export interface ITermChanges {

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -111,7 +111,9 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     let isValidateOnLoad = validateOnLoad && initialValues && initialValues.length >= 1;
     if (isValidateOnLoad) {
 
-      let notFoundTerms: string[] = [];
+      const notFoundTerms: string[] = [];
+      const notFoundTermIds: string[] = [];
+
       const termSet = await this.termsService.getAllTerms(termsetNameOrID, hideDeprecatedTags, hideTagsNotAvailableForTagging);
       const allTerms = termSet.Terms;
 
@@ -120,12 +122,14 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
 
         if (!allTerms.filter(t => t.Id === pickerTerm.key).length) {
           notFoundTerms.push(pickerTerm.name);
+          notFoundTermIds.push(pickerTerm.key);
         }
       }
 
       if (notFoundTerms.length) {
         this.setState({
-          internalErrorMessage: strings.TaxonomyPickerTermsNotFound.replace('{0}', notFoundTerms.join(', '))
+          internalErrorMessage: strings.TaxonomyPickerTermsNotFound.replace('{0}', notFoundTerms.join(', ')),
+          invalidNodeIds: notFoundTermIds
         });
       }
     }
@@ -312,6 +316,23 @@ 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
+    //
+    if (this.state.invalidNodeIds) {
+      const changedInvalidNodeIds = this.state.invalidNodeIds.filter(id => {
+        return !!value.filter(term => term.key === id).length;
+      });
+
+      let internalErrorMessage = changedInvalidNodeIds.length ? this.state.internalErrorMessage : '';
+
+      this.setState({
+        invalidNodeIds: changedInvalidNodeIds,
+        internalErrorMessage: internalErrorMessage
+      });
+    }
+
     if (this.props.errorMessage || !this.props.onGetErrorMessage) { // ignoring all onGetErrorMessage logic
       this.validated(value);
       return;

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -603,7 +603,22 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
         <div className="ms-font-m">Services tester:
           <TaxonomyPicker
             allowMultipleSelections={true}
-            termsetNameOrID="61837936-29c5-46de-982c-d1adb6664b32" // id to termset that has a custom sort
+            //termsetNameOrID="61837936-29c5-46de-982c-d1adb6664b32" // id to termset that has a custom sort
+            termsetNameOrID="8ea5ac06-fd7c-4269-8d0d-02f541df8eb9"
+            initialValues={[{
+              key: "c05250ff-80e7-41e6-bfb3-db2db62d63d3",
+              name: "Business",
+              path: "Business",
+              termSet: "8ea5ac06-fd7c-4269-8d0d-02f541df8eb9",
+              termSetName: "Trip Types"
+            }, {
+              key: "a05250ff-80e7-41e6-bfb3-db2db62d63d3",
+              name: "BBusiness",
+              path: "BBusiness",
+              termSet: "8ea5ac06-fd7c-4269-8d0d-02f541df8eb9",
+              termSetName: "Trip Types"
+            }]}
+            validateOnLoad={true}
             panelTitle="Select Sorted Term"
             label="Service Picker with custom actions"
             context={this.props.context}