fix: display default selected users and groups while disabling suggestions (#3279)

* display default selected users and groups

* differentiate stories

* fix tags

Author: Mnickii

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts

@@ -944,6 +944,39 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
       const graph = provider.graph.forComponent(this);
 
       if (!input.length) {
+        if (
+          (this.defaultSelectedUserIds.length > 0 || this.defaultSelectedGroupIds.length > 0) &&
+          !this.selectedPeople.length &&
+          !this.defaultSelectedUsers.length &&
+          !this.defaultSelectedGroups.length
+        ) {
+          this.defaultSelectedUsers = await getUsersForUserIds(
+            graph,
+            this.defaultSelectedUserIds,
+            '',
+            this.userFilters
+          );
+          this.defaultSelectedGroups = await getGroupsForGroupIds(
+            graph,
+            this.defaultSelectedGroupIds,
+            this.peopleFilters
+          );
+
+          this.defaultSelectedGroups = this.defaultSelectedGroups.filter(group => {
+            return group !== null;
+          });
+
+          this.defaultSelectedUsers = this.defaultSelectedUsers.filter(user => {
+            return user !== null;
+          });
+
+          this.selectedPeople = [...this.defaultSelectedUsers, ...this.defaultSelectedGroups];
+
+          if (this.hasMaxSelections) {
+            this.disableTextInput();
+          }
+          this.requestUpdate();
+        }
         if (this.disableSuggestions) {
           this._foundPeople = [];
           return;
@@ -1029,35 +1062,6 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
         }
       }
 
-      if (
-        (this.defaultSelectedUserIds.length > 0 || this.defaultSelectedGroupIds.length > 0) &&
-        !this.selectedPeople.length &&
-        !this.defaultSelectedUsers.length &&
-        !this.defaultSelectedGroups.length
-      ) {
-        this.defaultSelectedUsers = await getUsersForUserIds(graph, this.defaultSelectedUserIds, '', this.userFilters);
-        this.defaultSelectedGroups = await getGroupsForGroupIds(
-          graph,
-          this.defaultSelectedGroupIds,
-          this.peopleFilters
-        );
-
-        this.defaultSelectedGroups = this.defaultSelectedGroups.filter(group => {
-          return group !== null;
-        });
-
-        this.defaultSelectedUsers = this.defaultSelectedUsers.filter(user => {
-          return user !== null;
-        });
-
-        this.selectedPeople = [...this.defaultSelectedUsers, ...this.defaultSelectedGroups];
-
-        if (this.hasMaxSelections) {
-          this.disableTextInput();
-        }
-        this.requestUpdate();
-      }
-
       if (input) {
         people = [];
 

stories/components/peoplePicker/peoplePicker.properties.stories.js

@@ -79,7 +79,15 @@ closeModal.addEventListener('click', () => {
 `;
 
 export const disableSuggestions = () => html`
-  <mgt-people-picker disable-suggestions></mgt-people-picker>
+<h1>Disable suggestions</h1>
+<mgt-people-picker disable-suggestions></mgt-people-picker>
+<h1>Disable suggestions with default selected user Ids</h1>
+<mgt-people-picker
+default-selected-user-ids="e3d0513b-449e-4198-ba6f-bd97ae7cae85, 40079818-3808-4585-903b-02605f061225" disable-suggestions>
+</mgt-people-picker>
+
+
+  
 `;
 
 export const dynamicGroupId = () => html`