Stanleyy/fillin

common/changes/office-ui-fabric-react/stanleyy-fillin_2018-03-23-20-45.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ComboBox: Add some code comments. Minor bug fixes to the example page.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "stanleyy@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx

@@ -1702,6 +1702,13 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     return item && item.index === this.state.currentPendingValueValidIndex;
   }
 
+  /**
+   * Given default selected key(s) and selected key(s), return the selected keys(s).
+   * When default selected key(s) are available, they take precedence and return them instead of selected key(s).
+   *
+   * @returns No matter what specific types the input parameters are, always return an array of
+   *  either strings or numbers instead of premitive type.  This normlization makes caller's logic easier.
+   */
   private _getSelectedKeys(
     defaultSelectedKey: string | number | string[] | number[] | undefined,
     selectedKey: string | number | string[] | number[] | undefined

packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx

@@ -73,7 +73,8 @@ export class ComboBoxBasicExample extends React.Component<{}, {
       options: [],
       optionsMulti: [],
       selectedOptionKey: undefined,
-      value: 'Calibri'
+      value: 'Calibri',
+      valueMulti: 'Calibri'
     };
 
     for (let i = 0; i < 1000; i++) {
@@ -278,6 +279,7 @@ export class ComboBoxBasicExample extends React.Component<{}, {
           allowFreeform={ true }
           autoComplete='on'
           options={ optionsMulti }
+          value={ valueMulti }
           onChanged={ this._onChangedMulti }
           onResolveOptions={ this._getOptionsMulti }
           onRenderOption={ this._onRenderFontOption }
@@ -332,7 +334,7 @@ export class ComboBoxBasicExample extends React.Component<{}, {
     return INITIAL_OPTIONS;
   }
 
-  private _getOptionsMulti(currentOptions: IComboBoxOption[]): IComboBoxOption[] {
+  private _getOptionsMulti = (currentOptions: IComboBoxOption[]): IComboBoxOption[] => {
 
     if (this.state.options.length > 0) {
       return this.state.optionsMulti;
@@ -341,7 +343,7 @@ export class ComboBoxBasicExample extends React.Component<{}, {
     this.setState({
       optionsMulti: INITIAL_OPTIONS,
       selectedOptionKeys: [ 'C1' ],
-      value: undefined
+      valueMulti: undefined
     });
 
     return INITIAL_OPTIONS;

packages/office-ui-fabric-react/src/utilities/selectableOption/SelectableDroppableText.types.ts

@@ -31,12 +31,12 @@ export interface ISelectableDroppableTextProps<T> extends React.HTMLAttributes<T
   className?: string;
 
   /**
-   * The key that will be initially used to set a selected item.
+   * The key(s) that will be initially used to set a selected item.
    */
   defaultSelectedKey?: string | number | string[] | number[];
 
   /**
-   * The key of the selected item. If you provide this, you must maintain selection
+   * The key(s) of the selected item. If you provide this, you must maintain selection
    * state by observing onChange events and passing a new value in when changed.
    */
   selectedKey?: string | number | string[] | number[];