Replaced textbox with Searchbox for filtering

Author: gautamdsheth

src/controls/folderExplorer/FolderExplorer/FolderExplorer.tsx

@@ -9,6 +9,7 @@ import { IFolder, IFolderExplorerService } from '../../../services/IFolderExplor
 import { NewFolder } from "../NewFolder";
 import { Breadcrumb, IBreadcrumbItem } from "office-ui-fabric-react/lib/Breadcrumb";
 import * as telemetry from '../../../common/telemetry';
+import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 
 
 export class FolderExplorer extends React.Component<IFolderExplorerProps, IFolderExplorerState> {
@@ -52,7 +53,7 @@ export class FolderExplorer extends React.Component<IFolderExplorerProps, IFolde
         <div style={{ opacity: this.state.foldersLoading ? 0.8 : 1, }}>
           {!this.props.hiddenFilterBox && this._allFolders.length > 0 &&
             <div>
-              <TextField className={styles.filterBox} placeholder={strings.FolderFilterBoxPlaceholder} onChanged={this._onChangeFilterText} />
+              <SearchBox className={styles.filterBox} placeholder={strings.FolderFilterBoxPlaceholder} onSearch={this._onChangeFilterText} onChange={this._onChangeFilterText} />
             </div>
           }
           {this.state.folders.length === 0 &&

src/controls/listView/ListView.tsx

@@ -7,8 +7,8 @@ import { FileTypeIcon, IconType } from '../fileTypeIcon/index';
 import * as strings from 'ControlStrings';
 import { IGroupsItems } from './IListView';
 import * as telemetry from '../../common/telemetry';
-import { TextField } from 'office-ui-fabric-react/lib/components/TextField';
 import filter = require('lodash/filter');
+import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 
 /**
  * File type icon component
@@ -517,7 +517,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
     return (
       <div>
         {
-          showFilter && <TextField placeholder={filterPlaceHolder || strings.ListViewFilterLabel} onChanged={this._updateFilterValue} value={filterValue}/>
+          showFilter && <SearchBox placeholder={filterPlaceHolder || strings.ListViewFilterLabel} onSearch={this._updateFilterValue} onChange={this._updateFilterValue} value={filterValue}/>
         }
         <DetailsList
           key="ListViewControl"