[People Picker] fix #234

This patch attemps to fix #234 by

1. use the next props to update the state, if there is an update in the component
2. don't skip updating `selectedPersons` even if `defaultSelectedUsers` has no length

Author: tsekityam

src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -46,7 +46,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
    * componentWillMount lifecycle hook
    */
   public componentWillMount(): void {
-    this.getInitialPersons();
+    this.getInitialPersons(this.props);
   }
 
 
@@ -56,20 +56,21 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
   public componentWillUpdate(nextProps: IPeoplePickerProps, nextState: IPeoplePickerState): void {
     if (!isEqual(this.props.defaultSelectedUsers, nextProps.defaultSelectedUsers) ||
         this.props.groupName !== nextProps.groupName ||
-        this.props.webAbsoluteUrl !== nextProps.webAbsoluteUrl) {
-      this.getInitialPersons();
+        this.props.webAbsoluteUrl !== nextProps.webAbsoluteUrl ||
+        this.peopleSearchService.getSumOfPrincipalTypes(this.props.principalTypes) !== this.peopleSearchService.getSumOfPrincipalTypes(nextProps.principalTypes)) {
+      this.getInitialPersons(nextProps);
     }
   }
 
 
   /**
    * Get initial persons
    */
-  private async getInitialPersons() {
-    const { groupName } = this.props;
+  private async getInitialPersons(props: IPeoplePickerProps) {
+    const { groupName } = props;
     // Check if a group property was provided, and get the group ID
     if (groupName) {
-      this.groupId = await this.peopleSearchService.getGroupId(this.props.groupName, this.props.webAbsoluteUrl);
+      this.groupId = await this.peopleSearchService.getGroupId(props.groupName, props.webAbsoluteUrl);
       if (!this.groupId) {
         this.setState({
           errorMessage: "Group could not be found."
@@ -81,10 +82,10 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
     }
 
     // Check for default user values
-    if (this.props.defaultSelectedUsers && this.props.defaultSelectedUsers.length) {
+    if (props.defaultSelectedUsers) {
       let selectedPersons: IPersonaProps[] = [];
-      for (const userValue of this.props.defaultSelectedUsers) {
-        const userResult = await this.peopleSearchService.searchPersonByEmailOrLogin(userValue, this.props.principalTypes, this.props.webAbsoluteUrl, this.groupId, this.props.ensureUser);
+      for (const userValue of props.defaultSelectedUsers) {
+        const userResult = await this.peopleSearchService.searchPersonByEmailOrLogin(userValue, props.principalTypes, props.webAbsoluteUrl, this.groupId, props.ensureUser);
         if (userResult) {
           selectedPersons.push(userResult);
         }

src/services/PeopleSearchService.ts

@@ -32,6 +32,19 @@ export default class SPPeopleSearchService {
     return `https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email=${value}&UA=0&size=HR96x96`;
   }
 
+  /**
+   * Generate sum of principal types
+   * 
+   * PrincipalType controls the type of entities that are returned in the results.
+   * Choices are All - 15, Distribution List - 2 , Security Groups - 4, SharePoint Groups - 8, User - 1.
+   * These values can be combined (example: 13 is security + SP groups + users)
+   * 
+   * @param principalTypes 
+   */
+  public getSumOfPrincipalTypes(principalTypes: PrincipalType[]) {
+    return  !!principalTypes && principalTypes.length > 0 ? principalTypes.reduce((a, b) => a + b, 0) : 1;
+  }
+
   /**
    * Retrieve the specified group
    *
@@ -161,10 +174,7 @@ export default class SPPeopleSearchService {
           AllUrlZones: false,
           MaximumEntitySuggestions: maximumSuggestions,
           PrincipalSource: 15,
-          // PrincipalType controls the type of entities that are returned in the results.
-          // Choices are All - 15, Distribution List - 2 , Security Groups - 4, SharePoint Groups - 8, User - 1.
-          // These values can be combined (example: 13 is security + SP groups + users)
-          PrincipalType: !!principalTypes && principalTypes.length > 0 ? principalTypes.reduce((a, b) => a + b, 0) : 1,
+          PrincipalType: this.getSumOfPrincipalTypes(principalTypes),
           QueryString: query
         }
       };