Merge pull request #487 from microsoftgraph/nivogt/people-picker-flyout

people-picker behavior on focus and selection

Author: nmetulev

src/components/mgt-people-picker/mgt-people-picker.scss

@@ -77,6 +77,10 @@ mgt-people-picker .flyout-root {
 
 :host .people-selected-input,
 mgt-people-picker .people-selected-input {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex: 1 0 auto;
   font-family: var(--default-font-family, 'Segoe UI');
   position: relative;
   border: none;
@@ -98,6 +102,7 @@ mgt-people-picker .people-selected-input {
 
 :host .people-selected-list,
 mgt-people-picker .people-selected-list {
+  flex: 1 0 auto;
   display: flex;
   flex-wrap: wrap;
   vertical-align: middle;
@@ -219,6 +224,7 @@ mgt-people-picker .input-search.input-search--start {
 :host .people-picker-input,
 mgt-people-picker .people-picker-input {
   display: flex;
+  flex-wrap: wrap;
   order: 2;
   background-color: $input-background-color;
   margin: $avatar-margin;
@@ -347,3 +353,7 @@ mgt-people-picker .people-person-text-area {
   overflow: hidden;
   color: $font-color;
 }
+
+mgt-flyout {
+  flex: 1 0 auto;
+}

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

@@ -266,6 +266,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   // List of people requested if group property is provided
   private _groupPeople: IDynamicPerson[];
   private _debouncedSearch: { (): void; (): void };
+
   @internalProperty() private _isFocused = false;
 
   @internalProperty() private _foundPeople: IDynamicPerson[];
@@ -302,23 +303,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     if (!peopleInput) {
       return;
     }
-
     peopleInput.focus(options);
     peopleInput.select();
-
-    // handles hiding control if default people have no more selections available
-    const peopleLeft = this.filterPeople(this.defaultPeople);
-    let shouldShow = true;
-    if (peopleLeft && peopleLeft.length === 0) {
-      shouldShow = false;
-    }
-
-    if (shouldShow) {
-      window.requestAnimationFrame(() => {
-        // Mouse is focused on input
-        this.showFlyout();
-      });
-    }
   }
 
   /**
@@ -364,11 +350,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       'people-picker': true
     };
     return html`
-      <div class=${classMap(inputClasses)} @click=${() => this.focus()}>
-        <div class="people-picker-input">
-          <div class="people-selected-list">
-            ${selectedPeopleTemplate} ${flyoutTemplate}
-          </div>
+      <div class=${classMap(inputClasses)} @click=${e => this.focus(e)}>
+        <div class="people-selected-list">
+          ${selectedPeopleTemplate} ${flyoutTemplate}
         </div>
       </div>
     `;
@@ -429,6 +413,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           @keydown="${this.onUserKeyDown}"
           @keyup="${this.onUserKeyUp}"
           @blur=${this.lostFocus}
+          @click=${this.handleFlyout}
         />
       </div>
     `;
@@ -454,14 +439,14 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
             <div class="people-person">
               ${this.renderTemplate('selected-person', { person }, `selected-${person.id}`) ||
                 this.renderSelectedPerson(person)}
+
               <div class="overflow-gradient"></div>
-              <div class="CloseIcon" @click="${() => this.removePerson(person)}">\uE711</div>
+              <div class="CloseIcon" @click="${e => this.removePerson(person, e)}">\uE711</div>
             </div>
           `
       )}
     `;
   }
-
   /**
    * Render the flyout chrome.
    *
@@ -575,7 +560,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               'list-person': true
             };
             return html`
-              <li class="${classMap(listPersonClasses)}" @click="${() => this.onPersonClick(person)}">
+              <li class="${classMap(listPersonClasses)}" @click="${e => this.onPersonClick(person)}">
                 ${this.renderPersonResult(person)}
               </li>
             `;
@@ -667,8 +652,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           }
           this.defaultPeople = people;
         }
-        this._showLoading = false;
       }
+      this._showLoading = false;
 
       if (this.defaultSelectedUserIds && !this.selectedPeople.length) {
         const defaultSelectedUsers = await getUsersForUserIds(graph, this.defaultSelectedUserIds);
@@ -760,7 +745,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * Removes person from selected people
    * @param person - person and details pertaining to user selected
    */
-  protected removePerson(person: IDynamicPerson): void {
+  protected removePerson(person: IDynamicPerson, e: MouseEvent): void {
+    e.stopPropagation();
     const filteredPersonArr = this.selectedPeople.filter(p => {
       return p.id !== person.id;
     });
@@ -794,6 +780,22 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     }
   }
 
+  private handleFlyout() {
+    // handles hiding control if default people have no more selections available
+    const peopleLeft = this.filterPeople(this.defaultPeople);
+    let shouldShow = true;
+    if (peopleLeft && peopleLeft.length === 0) {
+      shouldShow = false;
+    }
+
+    if (shouldShow) {
+      window.requestAnimationFrame(() => {
+        // Mouse is focused on input
+        this.showFlyout();
+      });
+    }
+  }
+
   private gainedFocus() {
     this._isFocused = true;
     const input = this.renderRoot.querySelector('.people-selected-input') as HTMLInputElement;
@@ -869,9 +871,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       // remove last person in selected list
       this.selectedPeople = this.selectedPeople.splice(0, this.selectedPeople.length - 1);
       this.loadState();
-      // reset flyout position
       this.hideFlyout();
-      this.showFlyout();
       // fire selected people changed event
       this.fireCustomEvent('selectionChanged', this.selectedPeople);
       return;
@@ -883,10 +883,17 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   private onPersonClick(person: IDynamicPerson): void {
     this.addPerson(person);
     this.hideFlyout();
+
+    const peopleInput = this.renderRoot.querySelector('.people-selected-input') as HTMLInputElement;
+    if (!peopleInput) {
+      return;
+    }
+    peopleInput.focus();
+    this._isFocused = true;
+    this.hideFlyout();
     if (this.selectionMode === 'single') {
       return;
     }
-    this.focus();
   }
 
   /**
@@ -895,6 +902,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    */
   private handleUserSearch(input: HTMLInputElement) {
     if (!this._debouncedSearch) {
+      this._showLoading = true;
       this._debouncedSearch = debounce(async () => {
         // Wait a few milliseconds before showing the flyout.
         // This helps prevent loading state flickering while the user is actively changing the query.
@@ -916,7 +924,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     }
 
     if (this.userInput !== input.value) {
-      this._showLoading = true;
       this.userInput = input.value;
       this._debouncedSearch();
     }