From 513d1bcbc5fe28c1e9a1b859299e144520bf0ffa Mon Sep 17 00:00:00 2001
From: Joe Halvey <joseph.c.halvey2.ctr@cvr.mil>
Date: Mon, 23 May 2022 14:58:49 -0400
Subject: [PATCH 1/2] PeoplePicker validation bugfix

Clear error message when onGetErrorMessage() returns empty string
---
 src/controls/peoplepicker/PeoplePickerComponent.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/controls/peoplepicker/PeoplePickerComponent.tsx b/src/controls/peoplepicker/PeoplePickerComponent.tsx
index a81807a59..a34b2358e 100644
--- a/src/controls/peoplepicker/PeoplePickerComponent.tsx
+++ b/src/controls/peoplepicker/PeoplePickerComponent.tsx
@@ -185,6 +185,10 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
 
     if (!result) {
       this.validated(items);
+
+      this.setState({
+        errorMessage: undefined
+      });
       return;
     }
 

From 65d589d82238f60b6fe562b63f394d72266ef204 Mon Sep 17 00:00:00 2001
From: Joe Halvey <joseph.c.halvey2.ctr@cvr.mil>
Date: Mon, 23 May 2022 15:13:02 -0400
Subject: [PATCH 2/2] PeoplePicker - Implement validateOnFocusOut

---
 src/controls/peoplepicker/IPeoplePicker.ts          |  4 ++++
 src/controls/peoplepicker/PeoplePickerComponent.tsx | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/src/controls/peoplepicker/IPeoplePicker.ts b/src/controls/peoplepicker/IPeoplePicker.ts
index d5ecafc47..c6a4d353c 100644
--- a/src/controls/peoplepicker/IPeoplePicker.ts
+++ b/src/controls/peoplepicker/IPeoplePicker.ts
@@ -72,6 +72,10 @@ export interface IPeoplePickerProps {
    *
    */
   onGetErrorMessage?: (items: IPersonaProps[]) => string | Promise<string>;
+  /**
+   * Prop to validate contents on blur
+   */
+   validateOnFocusOut?: boolean;
   /**
    * Method to check value of People Picker text
    */
diff --git a/src/controls/peoplepicker/PeoplePickerComponent.tsx b/src/controls/peoplepicker/PeoplePickerComponent.tsx
index a34b2358e..b6fcd5457 100644
--- a/src/controls/peoplepicker/PeoplePickerComponent.tsx
+++ b/src/controls/peoplepicker/PeoplePickerComponent.tsx
@@ -152,6 +152,15 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
     this.validate(items);
   }
 
+  /**
+   * On blur UI event
+   * @param ev 
+   */
+   private onBlur = (ev) => {
+    if (this.props.validateOnFocusOut)
+      this.validate(this.state.selectedPersons);
+  }
+
 
   /**
    * Returns the most recently used person
@@ -306,6 +315,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
           itemLimit={personSelectionLimit || 1}
           disabled={disabled || !!internalErrorMessage}
           onChange={this.onChange}
+          onBlur={this.onBlur}
           resolveDelay={resolveDelay} />
       </div>
     );