Solving Issue

samples/react-directory/src/webparts/directory/components/Directory.tsx

@@ -1,11 +1,9 @@
 import * as React from "react";
 import styles from "./Directory.module.scss";
 import { IDirectoryProps } from "./IDirectoryProps";
-import { escape } from "@microsoft/sp-lodash-subset";
 import { PersonaCard } from "./PersonaCard/PersonaCard";
 import { spservices } from "../../../SPServices/spservices";
 import { IDirectoryState } from "./IDirectoryState";
-import { DisplayMode } from "@microsoft/sp-core-library";
 import * as strings from "DirectoryWebPartStrings";
 import {
   Spinner,
@@ -20,15 +18,10 @@ import {
   PivotLinkFormat,
   PivotLinkSize,
   Dropdown,
-  DropdownMenuItemType,
-  IDropdownStyles,
   IDropdownOption
 } from "office-ui-fabric-react";
-import { IProfileProperties } from "../../../SPServices/IProfileProperties";
+
-import { PeoplePickerEntity, Search, SearchResult } from "@pnp/sp";
 import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
-import { Root } from "@pnp/graph";
-import { IUserProperties } from "./PersonaCard/IUserProperties";
 
 const az: string[] = [
   "A",
@@ -68,7 +61,7 @@ const orderOptions: IDropdownOption[] = [
 export default class Directory extends React.Component<
   IDirectoryProps,
   IDirectoryState
-> {
+  > {
   private _services: spservices = null;
 
   constructor(props: IDirectoryProps) {
@@ -80,7 +73,8 @@ export default class Directory extends React.Component<
       errorMessage: "",
       hasError: false,
       indexSelectedKey: "A",
-      searchString: "LastName"
+      searchString: "LastName",
+      searchText: ""
     };
 
     this._services = new spservices(this.props.context);
@@ -88,6 +82,7 @@ export default class Directory extends React.Component<
     this._searchUsers = this._searchUsers.bind(this);
     this._selectedIndex = this._selectedIndex.bind(this);
     this._sortPeople = this._sortPeople.bind(this);
+    this._searchBoxChanged = this._searchBoxChanged.bind(this)
   }
 
   /**
@@ -104,7 +99,7 @@ export default class Directory extends React.Component<
    * @param pictureUrl
    * @returns
    */
-  private getImageBase64(pictureUrl: string):Promise<string>{
+  private getImageBase64(pictureUrl: string): Promise<string> {
     return new Promise((resolve, reject) => {
       let image = new Image();
       image.addEventListener("load", () => {
@@ -123,8 +118,10 @@ export default class Directory extends React.Component<
       });
       image.src = pictureUrl;
     });
-}
+  }
-
+  private _searchBoxChanged(newvalue: string): void {
+    this.setState({ searchText: newvalue }, () => this._searchUsers(newvalue));
+  }
 
   private async _searchUsers(searchText: string) {
     searchText = searchText.trim().length > 0 ? searchText : "A";
@@ -140,12 +137,12 @@ export default class Directory extends React.Component<
         this.props.searchFirstName
       );
 
-      if (users && users.PrimarySearchResults.length > 0){
+      if (users && users.PrimarySearchResults.length > 0) {
         for (let index = 0; index < users.PrimarySearchResults.length; index++) {
-          let user:any = users.PrimarySearchResults[index]  ;
+          let user: any = users.PrimarySearchResults[index];
-          if (user.PictureURL){
+          if (user.PictureURL) {
-            user = { ...user, PictureURL: await this.getImageBase64(`/_layouts/15/userphoto.aspx?size=M&accountname=${user.WorkEmail}`)};
+            user = { ...user, PictureURL: await this.getImageBase64(`/_layouts/15/userphoto.aspx?size=M&accountname=${user.WorkEmail}`) };
-           users.PrimarySearchResults[index]  =  user ;
+            users.PrimarySearchResults[index] = user;
           }
         }
       }
@@ -279,7 +276,7 @@ export default class Directory extends React.Component<
    * @memberof Directory
    */
   private _selectedIndex(item?: PivotItem, ev?: React.MouseEvent<HTMLElement>) {
-    this._searchUsers(item.props.itemKey);
+    this.setState({ searchText: "" }, () => this._searchUsers(item.props.itemKey));
   }
   /**
    *
@@ -336,7 +333,8 @@ export default class Directory extends React.Component<
             onClear={() => {
               this._searchUsers("A");
             }}
-            onChange={this._searchUsers}
+            value={this.state.searchText}
+            onChange={this._searchBoxChanged}
           />
           <div>
             <Pivot

samples/react-directory/src/webparts/directory/components/IDirectoryState.ts

@@ -1,5 +1,4 @@
-import { IProfileProperties } from "./../../../SPServices/IProfileProperties";
+
-import { PeoplePickerEntity, SearchResult, SearchResults } from "@pnp/pnpjs";
 export interface IDirectoryState {
   users: any;
   isLoading: boolean;
@@ -7,4 +6,5 @@ export interface IDirectoryState {
   hasError: boolean;
   indexSelectedKey: string;
   searchString: string;
+  searchText: string;
 }