fix of #683

Author: AJIXuMuK

src/controls/listItemPicker/ComboBoxListItemPicker.tsx

@@ -31,10 +31,10 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
   }
 
   public componentDidMount(): void {
-    this.loadOptions();
+    this.loadOptions(this.props);
   }
 
-  protected async loadOptions(): Promise<void> {
+  protected async loadOptions(props: IComboBoxListItemPickerProps, isInitialLoad?: boolean): Promise<void> {
     const {
       filter,
       keyColumnInternalName,
@@ -44,7 +44,7 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
       itemLimit,
       defaultSelectedItems,
       onInitialized
-    } = this.props;
+    } = props;
     let query = filter || "";
     //query += filter;
     let keyColumnName = keyColumnInternalName || "Id";
@@ -73,17 +73,24 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
     this.setState({
       availableOptions: options
     });
-    if(onInitialized){
+    if(onInitialized && isInitialLoad !== false){
       onInitialized();
     }
   }
 
-  public componentDidUpdate(prevProps: IComboBoxListItemPickerProps, prevState: IComboBoxListItemPickerState): void {
-    if (this.props.listId !== prevProps.listId) {
+  public async componentWillReceiveProps(nextProps: IComboBoxListItemPickerProps): Promise<void> {
+    if (nextProps.listId !== this.props.listId) {
+      await this.loadOptions(nextProps, false);
       this.selectedItems = [];
     }
   }
 
+  /*public componentDidUpdate(prevProps: IComboBoxListItemPickerProps, prevState: IComboBoxListItemPickerState): void {
+    if (this.props.listId !== prevProps.listId) {
+
+    }
+  }*/
+
   /**
    * Render the field
    */

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -33,7 +33,7 @@ import { TermLabelAction, TermActionsDisplayMode } from '../../../controls/taxon
 import { ListItemAttachments } from '../../../ListItemAttachments';
 import { RichText } from '../../../RichText';
 import { Link } from 'office-ui-fabric-react/lib/components/Link';
-import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay, CarouselIndicatorShape, CarouselIndicatorsDisplay  } from '../../../controls/carousel';
+import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay, CarouselIndicatorShape, CarouselIndicatorsDisplay } from '../../../controls/carousel';
 import { TimeDisplayControlType } from '../../../controls/dateTimePicker/TimeDisplayControlType';
 import { GridLayout } from '../../../GridLayout';
 import { ComboBoxListItemPicker } from '../../../controls/listItemPicker/ComboBoxListItemPicker';
@@ -309,7 +309,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
       richTextValue: null,
       canMovePrev: false,
       canMoveNext: true,
-      currentCarouselElement: this.carouselElements[0]
+      currentCarouselElement: this.carouselElements[0],
+      comboBoxListItemPickerListId: '0ffa51d7-4ad1-4f04-8cfe-98209905d6da'
     };
 
     this._onIconSizeChange = this._onIconSizeChange.bind(this);
@@ -1106,7 +1107,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
 
               <div className="ms-font-m">ComboBoxListItemPicker:
 
-                <ComboBoxListItemPicker listId={'0ffa51d7-4ad1-4f04-8cfe-98209905d6da'}
+                <ComboBoxListItemPicker listId={this.state.comboBoxListItemPickerListId}
                   columnInternalName='Title'
                   keyColumnInternalName='Id'
                   multiSelect={true}
@@ -1116,6 +1117,10 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   webUrl={this.props.context.pageContext.web.absoluteUrl}
                   spHttpClient={this.props.context.spHttpClient} />
 
+                <PrimaryButton text="Change List" onClick={() => { this.setState({
+                  comboBoxListItemPickerListId: '71210430-8436-4962-a14d-5525475abd6b'
+                }); }} />
+
               </div>
 
               <div className="ms-font-m">iframe dialog tester:
@@ -1128,7 +1133,15 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   hidden={!this.state.iFrameDialogOpened}
                   onDismiss={() => { this.setState({ iFrameDialogOpened: false }); }}
                   modalProps={{
-                    isBlocking: true
+                    isBlocking: true,
+                    styles: {
+                      root: {
+                        backgroundColor: '#00ff00'
+                      },
+                      main: {
+                        backgroundColor: '#ff0000'
+                      }
+                    }
                   }}
                   dialogContentProps={{
                     type: DialogType.close,
@@ -1324,7 +1337,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             onExpandCollapse={this.onExpandCollapseTree}
             onSelect={this.onItemSelected}
             defaultExpandedChildren={true}
-            //expandToSelected={true}
+          //expandToSelected={true}
           // onRenderItem={this.renderCustomTreeItem}
           />
 

src/webparts/controlsTest/components/ControlsTest_SingleComponent.tsx

@@ -131,7 +131,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
       richTextValue: null,
       canMovePrev: false,
       canMoveNext: true,
-      currentCarouselElement: this.carouselElements[0]
+      currentCarouselElement: this.carouselElements[0],
+      comboBoxListItemPickerListId: '0ffa51d7-4ad1-4f04-8cfe-98209905d6da'
     };
 
     this._onIconSizeChange = this._onIconSizeChange.bind(this);

src/webparts/controlsTest/components/IControlsTestProps.ts

@@ -28,6 +28,7 @@ export interface IControlsTestState {
   currentCarouselElement: JSX.Element;
   canMovePrev: boolean;
   canMoveNext: boolean;
+  comboBoxListItemPickerListId: string;
 
   filePickerResult?: IFilePickerResult;
 }