Merge pull request #1221 from HardluckHalvey/master

PeoplePicker validation bugfix
pnp · Jun 23, 2022 · 1e0ab6c · 1e0ab6c
2 parents 87bdb33 + 65d589d
commit 1e0ab6c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git 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
@@ -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
@@ -185,6 +194,10 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
 
     if (!result) {
       this.validated(items);
+
+      this.setState({
+        errorMessage: undefined
+      });
       return;
     }
 
@@ -302,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>
     );