fix: people picker single select mode (#2541)

Rephrase max selection placeholder and fix typo
Set the input to disabled after single-select
Reset input value when you search for a user in single select mode
disable input when maxSelections reached by keyboard selection

---------

Signed-off-by: Martin Musale <[email protected]>
Co-authored-by: Martin Musale <[email protected]>

Author: gavinbarron

index.html

@@ -56,10 +56,11 @@ <h2>mgt-login</h2>
       <!-- <h2>mgt-person me query two lines card on click with presence</h2> -->
       <!-- <mgt-person person-query="me" view="twoLines" person-card="hover" show-presence></mgt-person> -->
       <!-- <mgt-person-card person-query="me"></mgt-person-card> -->
-      <h2>mgt-people-picker</h2>
-      <mgt-people-picker show-max="6"></mgt-people-picker>
-      <h2>mgt-teams-channel-picker</h2>
-      <mgt-teams-channel-picker></mgt-teams-channel-picker>
+      <!-- <h2>mgt-people-picker</h2>
+      <mgt-people-picker selection-mode="single" show-max="6"></mgt-people-picker>
+      <mgt-people-picker show-max="6"></mgt-people-picker> -->
+      <!-- <h2>mgt-teams-channel-picker</h2>
+      <mgt-teams-channel-picker></mgt-teams-channel-picker> -->
       <!-- <h2>mgt-tasks</h2>
       <mgt-tasks></mgt-tasks> -->
       <!-- <h2>mgt-agenda group-by-day</h2>

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

@@ -606,6 +606,10 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     this.addEventListener('paste', this.handlePaste);
   }
 
+  private get hasMaxSelections(): boolean {
+    return this.selectionMode === 'single' && this.selectedPeople.length >= 1;
+  }
+
   /**
    * Focuses the input element when focus is called
    *
@@ -739,18 +743,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @memberof MgtPeoplePicker
    */
   protected renderInput(selectedPeopleTemplate: TemplateResult): TemplateResult {
-    const placeholder = !this.disabled
-      ? this.placeholder
-        ? this.placeholder
-        : this.strings.inputPlaceholderText
-      : this.placeholder || '';
-
-    const selectionMode = this.selectionMode ? this.selectionMode : 'multiple';
-
-    if (selectionMode === 'single' && this.selectedPeople.length >= 1) {
-      this.lostFocus();
-      return html``;
-    }
+    const placeholder = this.disabled ? '' : this.placeholder || this.strings.inputPlaceholderText;
+    const maxSelectionsAriaLabel = this.hasMaxSelections ? this.strings.maxSelectionsAriaLabel : '';
 
     const searchIcon = html`<span class="search-icon">${getSvg(SvgIcon.Search)}</span>`;
     const startSlot = this.selectedPeople?.length > 0 ? selectedPeopleTemplate : searchIcon;
@@ -761,17 +755,17 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         slot="anchor"
         id="people-picker-input"
         role="combobox"
+        placeholder=${this.hasMaxSelections ? this.strings.maxSelectionsPlaceHolder : placeholder}
+        aria-label=${this.ariaLabel || maxSelectionsAriaLabel || placeholder || this.strings.selectContact}
         aria-expanded=${this.flyout?.isOpen ?? false}
-        placeholder=${placeholder}
-        aria-label=${this.ariaLabel || placeholder || this.strings.selectContact}
-        @click="${this.handleInputClick}"
-        @focus="${this.gainedFocus}"
-        @keydown="${this.onUserKeyDown}"
-        @keyup="${this.onUserKeyUp}"
-        @input="${this.onUserInput}"
+        @click="${this.hasMaxSelections ? undefined : this.handleInputClick}"
+        @focus="${this.hasMaxSelections ? undefined : this.gainedFocus}"
+        @keydown="${this.hasMaxSelections ? undefined : this.onUserKeyDown}"
+        @input="${this.hasMaxSelections ? undefined : this.onUserInput}"
         @blur="${this.lostFocus}"
-        ?disabled=${this.disabled}>
-          <span slot="start">${startSlot}</span>
+        ?disabled=${this.disabled}
+      >
+        <span slot="start">${startSlot}</span>
       </fluent-text-field>
     `;
   }
@@ -1296,10 +1290,14 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       }
       return p.id !== person.id;
     });
+    const inputControl = this.input.shadowRoot.querySelector<HTMLInputElement>('input');
+    if (this.hasMaxSelections && inputControl) {
+      inputControl.removeAttribute('disabled');
+    }
     this.selectedPeople = filteredPersonArr;
     void this.loadState();
     this.fireCustomEvent('selectionChanged', this.selectedPeople);
-    this.input?.focus();
+    inputControl?.focus();
   }
 
   /**
@@ -1473,6 +1471,11 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   // handle suggestion list item click
   private handleSuggestionClick(person: IDynamicPerson): void {
     this.addPerson(person);
+    const inputControl = this.input.shadowRoot.querySelector<HTMLInputElement>('input');
+    if (this.hasMaxSelections && inputControl) {
+      inputControl.setAttribute('disabled', 'true');
+      this.input.value = inputControl.value = '';
+    }
     this.hideFlyout();
   }
 
@@ -1559,6 +1562,10 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           this.addPerson(foundPerson);
           this.hideFlyout();
           this.input.value = '';
+          const inputControl = this.input.shadowRoot.querySelector<HTMLInputElement>('input');
+          if (this.hasMaxSelections && inputControl) {
+            inputControl.setAttribute('disabled', 'true');
+          }
         }
       } else if (this.allowAnyEmail) {
         this.handleAnyEmail();

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

@@ -7,6 +7,8 @@
 
 export const strings = {
   inputPlaceholderText: 'Start typing a name',
+  maxSelectionsPlaceHolder: 'Max contacts added',
+  maxSelectionsAriaLabel: 'Maximum contact selections reached',
   noResultsFound: "We didn't find any matches.",
   loadingMessage: 'Loading...',
   selected: 'selected',

stories/components/peoplePicker/peoplePicker.properties.js

@@ -18,6 +18,10 @@ export const groupId = () => html`
   <mgt-people-picker group-id="02bd9fd6-8f93-4758-87c3-1fb73740a315"></mgt-people-picker>
 `;
 
+export const singleSelectMode = () => html`
+<mgt-people-picker selection-mode="single"></mgt-people-picker>
+`;
+
 export const dynamicGroupId = () => html`
   <mgt-people-picker id="picker"></mgt-people-picker>
   <div>