Merge pull request #1663 from NishkalankBezawada/Issue-374

Fixing Issue 374 - Added a new property to People Picker

Author: joelfmrodrigues

docs/documentation/docs/controls/PeoplePicker.md

@@ -38,6 +38,7 @@ import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/People
     showtooltip={true}
     required={true}
     disabled={true}
+    searchTextLimit={5}
     onChange={this._getPeoplePickerItems}
     showHiddenInUI={false}
     principalTypes={[PrincipalType.User]}
@@ -83,6 +84,7 @@ The People picker control can be configured with the following properties:
 | resolveDelay | number | no | Add delay to resolve and search users | 200 |
 | placeholder | string | no | Short text hint to display in empty picker |
 | styles | Partial<IBasePickerStyles> | no | Styles to apply on control |
+| searchTextLimit | number | no | Specifies the minimum character count needed to begin retrieving search results. | 2 |
 
 Enum `PrincipalType`
 

src/controls/peoplepicker/IPeoplePicker.ts

@@ -37,6 +37,10 @@ export interface IPeoplePickerProps {
    * Maximum number of suggestions to show in the full suggestion list. (default: 5)
    */
   suggestionsLimit?: number;
+  /**
+   * Specifies the minimum character count needed to begin retrieving search results. (default : 2)
+   */
+  searchTextLimit?: number;
   /**
    * Specify the user / group types to retrieve
    */

src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -20,12 +20,14 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
   private peopleSearchService: SPPeopleSearchService;
   private suggestionsLimit: number;
   private groupId: number | string | (string | number)[];
+  private searchTextCount: number;
 
   constructor(props: IPeoplePickerProps) {
     super(props);
 
     this.peopleSearchService = new SPPeopleSearchService(props.context);
     this.suggestionsLimit = this.props.suggestionsLimit ? this.props.suggestionsLimit : 5;
+    this.searchTextCount = this.props.searchTextLimit ? this.props.searchTextLimit : 2;
 
     telemetry.track('ReactPeoplePicker', {
       groupName: !!props.groupName,
@@ -135,7 +137,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
    * A search field change occured
    */
   private onSearchFieldChanged = async (searchText: string, currentSelected: IPersonaProps[]): Promise<IPersonaProps[]> => {
-    if (searchText.length > 2) {
+    if (searchText.length > this.searchTextCount) {
       const results = await this.peopleSearchService.searchPeople(searchText, this.suggestionsLimit, this.props.principalTypes, this.props.webAbsoluteUrl, this.groupId, this.props.ensureUser, this.props.allowUnvalidated);
       // Remove duplicates
       const { selectedPersons, mostRecentlyUsedPersons } = this.state;

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1510,6 +1510,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           <PeoplePicker context={this.props.context}
             titleText="People Picker (tenant scoped)"
             personSelectionLimit={10}
+            searchTextLimit={5} //New property : Specifies the minimum character count needed to begin retrieving search results. (default : 2)
             // groupName={"Team Site Owners"}
             showtooltip={true}
             required={true}