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",
@@ -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)
   }
 
   /**
@@ -124,7 +119,9 @@ 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";
@@ -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;
 }