merge with dev and updates

Author: AJIXuMuK

src/controls/iconPicker/IconPicker.module.scss

@@ -2,6 +2,7 @@
 
 .dialog {
   max-width: 600px;
+  width: 600px;
 }
 
 .dialogSelectedIcons {
@@ -15,6 +16,7 @@
   padding: 5px;
   overflow: auto;
   max-height: 600px;
+  height: 600px;
 }
 
 .dialogFooter {

src/controls/iconPicker/IconPicker.tsx

@@ -8,21 +8,21 @@ import styles from './IconPicker.module.scss';
 import * as strings from 'ControlStrings';
 import { IconNames } from './IconNames';
 import { Panel, PanelType, IPanelProps } from 'office-ui-fabric-react/lib/Panel';
-import { debounce } from 'lodash';
+import debounce = require('lodash/debounce');
 import { IIconPickerState } from './IIconPickerState';
 import * as telemetry from '../../common/telemetry';
 import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
 import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
 
-initializeIcons();
-
 export class IconPicker extends React.Component<IIconPickerProps, IIconPickerState> {
   private radioIdBase: string = getId("radio");
 
 
   constructor(props: IIconPickerProps) {
     super(props);
 
+    initializeIcons();
+
     telemetry.track('IconPicker');
 
     this.state = {
@@ -83,8 +83,8 @@ export class IconPicker extends React.Component<IIconPickerProps, IIconPickerSta
             <SearchBox className={styles.searchBox}
               onAbort={this.onAbort}
               data-automation-id={`icon-picker-search`}
-
-              onChange={this.onChange} />
+              onSearch={debounce(this.onChange, 300)}
+              onChange={debounce(this.onChange, 300)} />
             <div className={styles.dialogIconsContainer}>
               {this.renderPanelContent()}
             </div>
@@ -158,8 +158,8 @@ export class IconPicker extends React.Component<IIconPickerProps, IIconPickerSta
       <SearchBox className={styles.searchBox}
         onAbort={this.onAbort}
         data-automation-id={`icon-picker-search`}
-
-        onChange={this.onChange} />
+        onSearch={debounce(this.onChange, 300)}
+        onChange={debounce(this.onChange, 300)} />
       <div className={styles.closeBtnContainer}>{defaultRender!(props)}</div>
     </div>;
   }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -36,7 +36,7 @@ import { Link } from 'office-ui-fabric-react/lib/components/Link';
 import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay } from '../../../controls/carousel';
 import { TimeDisplayControlType } from '../../../controls/dateTimePicker/TimeDisplayControlType';
 import { GridLayout } from '../../../GridLayout';
-import { ComboBoxListItemPicker } from '../../../';
+import { ComboBoxListItemPicker } from '../../../controls/listItemPicker/ComboBoxListItemPicker';
 import { TreeView, ITreeItem, TreeItemActionsDisplayMode, TreeViewSelectionMode } from '../../../controls/treeView';
 import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
 import { IconPicker } from '../../../controls/iconPicker';
@@ -1044,6 +1044,10 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           onRenderGridItem={(item: any, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}
         />
 
+        <IconPicker buttonLabel={'Icon'}
+            onChange={(iconName: string) => { console.log(iconName); }}
+            onSave={(iconName: string) => { console.log(iconName); }} />
+
         <div>
           <FolderExplorer
             context={this.props.context}