ComboBoxListItemPicker support for changing defaultSelectedItems

Author: joelfmrodrigues

src/controls/listItemPicker/ComboBoxListItemPicker.tsx

@@ -7,11 +7,12 @@ import { ComboBox, IComboBoxOption } from "office-ui-fabric-react/lib/ComboBox";
 import { ListItemRepository } from '../../common/dal/ListItemRepository';
 import styles from './ComboBoxListItemPicker.module.scss';
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 
 
 export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPickerProps, IComboBoxListItemPickerState> {
   private _listItemRepo: ListItemRepository;
+  private _options: any[] = null;
 
   constructor(props: IComboBoxListItemPickerProps) {
     super(props);
@@ -44,45 +45,32 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
       columnInternalName,
       webUrl,
       itemLimit,
-      defaultSelectedItems,
       onInitialized
     } = props;
-    let selectedItems: any[] = [];
     let query = filter || "";
     //query += filter;
     let keyColumnName = keyColumnInternalName || "Id";
-    let listItems = await this._listItemRepo.getListItemsByFilterClause(query,
-      listId,
-      columnInternalName,
-      keyColumnInternalName,
-      webUrl,
-      itemLimit || 100);
 
-    let options = listItems.map(option => {
-      return {
-        key: option[keyColumnName],
-        text: option[columnInternalName || "Id"]
-      };
-    });
-    if (defaultSelectedItems) {
-      //if passed only ids
-      if (!isNaN(defaultSelectedItems[0])) {
-        selectedItems = options.filter(opt => defaultSelectedItems.indexOf(opt.key) >= 0);
-      }
-      else {
-        selectedItems = options.filter(opt => defaultSelectedItems.map(selected => selected[keyColumnName]).indexOf(opt.key) >= 0);
-      }
-    }
-    if (selectedItems?.length > 0) {
-      selectedItems = selectedItems.map(item => {
-        return {
-          [this.props.keyColumnInternalName || "Id"]: item.key,
-          [this.props.columnInternalName]: item.text
-        }
-      })
+    if (!this._options || listId !== this.props.listId) {
+      const listItems = await this._listItemRepo.getListItemsByFilterClause(query,
+        listId,
+        columnInternalName,
+        keyColumnInternalName,
+        webUrl,
+        itemLimit || 100);
+
+        this._options = listItems.map(option => {
+          return {
+            key: option[keyColumnName],
+            text: option[columnInternalName || "Id"]
+          };
+        });
     }
+
+    const selectedItems = this._getSelectedItems(props);
+
     this.setState({
-      availableOptions: options,
+      availableOptions: this._options,
       selectedItems: selectedItems,
     });
     if (onInitialized && isInitialLoad !== false) {
@@ -92,13 +80,43 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
 
   public async componentWillReceiveProps(nextProps: IComboBoxListItemPickerProps): Promise<void> {
     if (nextProps.listId !== this.props.listId) {
-      await this.loadOptions(nextProps, false);
       this.setState({
         selectedItems: [],
       });
+      await this.loadOptions(nextProps, false);
+    }
+    if (!isEqual(nextProps.defaultSelectedItems, this.props.defaultSelectedItems)) {
+      const selectedItems = this._getSelectedItems(nextProps);
+      this.setState({
+        selectedItems: selectedItems,
+      });
     }
   }
 
+  private _getSelectedItems(props: IComboBoxListItemPickerProps): any[] {
+    let selectedItems: any[] = [];
+    let keyColumnName = props.keyColumnInternalName || "Id";
+    if (props.defaultSelectedItems) {
+      //if passed only ids
+      if (!isNaN(props.defaultSelectedItems[0])) {
+        selectedItems = this._options.filter(opt => props.defaultSelectedItems.indexOf(opt.key) >= 0);
+      }
+      else {
+        selectedItems = this._options.filter(opt => props.defaultSelectedItems.map(selected => selected[keyColumnName]).indexOf(opt.key) >= 0);
+      }
+    }
+    if (selectedItems?.length > 0) {
+      selectedItems = selectedItems.map(item => {
+        return {
+          [this.props.keyColumnInternalName || "Id"]: item.key,
+          [this.props.columnInternalName]: item.text
+        }
+      })
+    }
+
+    return selectedItems;
+  }
+
   /*public componentDidUpdate(prevProps: IComboBoxListItemPickerProps, prevState: IComboBoxListItemPickerState): void {
     if (this.props.listId !== prevProps.listId) {
 

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -437,6 +437,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
       canMoveNext: true,
       currentCarouselElement: this.carouselElements[0],
       comboBoxListItemPickerListId: '0ffa51d7-4ad1-4f04-8cfe-98209905d6da',
+      comboBoxListItemPickerIds: [{Id: 1, Title: '111'}],
       treeViewSelectedKeys: ['gc1', 'gc3'],
       showAnimatedDialog: false,
       showCustomisedAnimatedDialog: false,
@@ -1442,6 +1443,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   onSelectedItem={(data) => {
                     console.log(`Item(s):`, data);
                   }}
+                  defaultSelectedItems={this.state.comboBoxListItemPickerIds}
                   webUrl={this.props.context.pageContext.web.absoluteUrl}
                   spHttpClient={this.props.context.spHttpClient} />
 
@@ -1450,6 +1452,11 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                     comboBoxListItemPickerListId: '71210430-8436-4962-a14d-5525475abd6b'
                   });
                 }} />
+                <PrimaryButton text="Change default items" onClick={() => {
+                  this.setState({
+                    comboBoxListItemPickerIds: [{Id: 2, Title: '222'}]
+                  });
+                }} />
 
               </div>
 

src/webparts/controlsTest/components/ControlsTest_SingleComponent.tsx

@@ -134,6 +134,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
       canMoveNext: true,
       currentCarouselElement: this.carouselElements[0],
       comboBoxListItemPickerListId: '0ffa51d7-4ad1-4f04-8cfe-98209905d6da',
+      comboBoxListItemPickerIds: [],
       selectedTeam: [],
       selectedTeamChannels: []
 

src/webparts/controlsTest/components/IControlsTestProps.ts

@@ -34,6 +34,7 @@ export interface IControlsTestState {
   canMovePrev: boolean;
   canMoveNext: boolean;
   comboBoxListItemPickerListId: string;
+  comboBoxListItemPickerIds: any[];
   filePickerResult?: IFilePickerResult[];
   treeViewSelectedKeys?: string[];
   showAnimatedDialog?: boolean;