From ff6bf116506d63447711c689d7272e7c58ba13cc Mon Sep 17 00:00:00 2001
From: Elio Struyf <info@estruyf.be>
Date: Thu, 9 Aug 2018 13:00:31 +0200
Subject: [PATCH] Fixes for #85 and #81

---
 CHANGELOG.json                                |  3 +-
 CHANGELOG.md                                  |  1 +
 .../documentation/docs/about/release-notes.md |  1 +
 .../PropertyFieldMultiSelectHost.tsx          |  7 ++-
 .../order/PropertyFieldOrderHost.module.scss  |  6 +--
 .../order/PropertyFieldOrderHost.tsx          | 52 +++++++++++++------
 .../PropertyControlsTestWebPart.ts            |  7 +++
 7 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.json b/CHANGELOG.json
index cf603ad8..fe17ef5b 100644
--- a/CHANGELOG.json
+++ b/CHANGELOG.json
@@ -11,7 +11,8 @@
           "`PropertyFieldCollectionData`: Hide save button when \"Add and save\" is shown [#88](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/88)"
         ],
         "fixes": [
-          "`PropertyFieldMultiSelect`: fixed an issue where the control didn't retain the preselected values when dropdown options were provided async [#85](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/85)"
+          "`PropertyFieldMultiSelect`: fixed an issue where the control didn't retain the preselected values when dropdown options were provided async [#85](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/85)",
+          "`PropertyFieldOrder`: fixed an issue where items where provided async [#81](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/81)"
         ]
       },
       "contributions": []
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7420bf9c..55a033fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 **Fixes**
 
 - `PropertyFieldMultiSelect`: fixed an issue where the control didn't retain the preselected values when dropdown options were provided async [#85](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/85)
+- `PropertyFieldOrder`: fixed an issue where items where provided async [#81](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/81)
 
 ## 1.8.0
 
diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
index 7420bf9c..55a033fd 100644
--- a/docs/documentation/docs/about/release-notes.md
+++ b/docs/documentation/docs/about/release-notes.md
@@ -12,6 +12,7 @@
 **Fixes**
 
 - `PropertyFieldMultiSelect`: fixed an issue where the control didn't retain the preselected values when dropdown options were provided async [#85](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/85)
+- `PropertyFieldOrder`: fixed an issue where items where provided async [#81](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/81)
 
 ## 1.8.0
 
diff --git a/src/propertyFields/multiSelect/PropertyFieldMultiSelectHost.tsx b/src/propertyFields/multiSelect/PropertyFieldMultiSelectHost.tsx
index 744bc2b9..ac84700a 100644
--- a/src/propertyFields/multiSelect/PropertyFieldMultiSelectHost.tsx
+++ b/src/propertyFields/multiSelect/PropertyFieldMultiSelectHost.tsx
@@ -15,18 +15,17 @@ export default class PropertyFieldMultiSelectHost extends React.Component<IPrope
   }
 
   public render(): JSX.Element {
-    if (this.props.options && this.props.options.length === 0 &&
-        this.props.selectedKeys && this.props.selectedKeys.length > 0) {
+    if (!this.props.options || (this.props.options && this.props.options.length === 0)) {
       return (
         <div>
-          <Dropdown label={this.props.label} placeHolder={strings.propertyFieldMultiSelectNoOptions} disabled={true} />
+          <Dropdown key={`MultiSelectOptionsDisabled`} label={this.props.label} options={[]} placeHolder={strings.propertyFieldMultiSelectNoOptions} disabled={true} />
         </div>
       );
     }
 
     return (
       <div>
-        <Dropdown key={`MultiSelectOptions-${this.props.options.length}`} {...this.props} multiSelect={true} />
+        <Dropdown key={`MultiSelectOptions`} {...this.props} multiSelect={true} />
       </div>
     );
   }
diff --git a/src/propertyFields/order/PropertyFieldOrderHost.module.scss b/src/propertyFields/order/PropertyFieldOrderHost.module.scss
index 8b4b47cc..7b716228 100644
--- a/src/propertyFields/order/PropertyFieldOrderHost.module.scss
+++ b/src/propertyFields/order/PropertyFieldOrderHost.module.scss
@@ -6,7 +6,7 @@ $ms-color-white: '[theme:white, default:#ffffff]';
 
 
 .propertyFieldOrder {
-  margin-bottom: -8px;
+  margin-bottom: 2px;
 
   ul {
     padding: 0.5px;
@@ -19,7 +19,7 @@ $ms-color-white: '[theme:white, default:#ffffff]';
     li {
       color: $ms-color-neutralTertiary;
     }
-    
+
   }
 
   li {
@@ -29,7 +29,7 @@ $ms-color-white: '[theme:white, default:#ffffff]';
     border-color: $ms-color-neutralLight;
     outline: 0.5px solid;
     outline-color: $ms-color-neutralLight;
-  
+
     .enabled & :hover {
       background-color: $ms-color-neutralLighter;
     }
diff --git a/src/propertyFields/order/PropertyFieldOrderHost.tsx b/src/propertyFields/order/PropertyFieldOrderHost.tsx
index e1ff8d71..e7aff49a 100644
--- a/src/propertyFields/order/PropertyFieldOrderHost.tsx
+++ b/src/propertyFields/order/PropertyFieldOrderHost.tsx
@@ -9,6 +9,7 @@ import * as React from 'react';
 import * as telemetry from '../../common/telemetry';
 import { IPropertyFieldOrderHostProps, IPropertyFieldOrderHostState } from './IPropertyFieldOrderHost';
 import styles from './PropertyFieldOrderHost.module.scss';
+import { isEqual } from '@microsoft/sp-lodash-subset';
 
 export default class PropertyFieldOrderHost extends React.Component<IPropertyFieldOrderHostProps, IPropertyFieldOrderHostState> {
 
@@ -38,27 +39,31 @@ export default class PropertyFieldOrderHost extends React.Component<IPropertyFie
 		this._draggedItem = null;
 
 		this.state = {
-			items: this.props.items
+			items: []
 		};
-	}
+  }
 
 	public render(): JSX.Element {
 		return (
 			<div className={styles.propertyFieldOrder}>
 				{this.props.label && <Label>{this.props.label}</Label>}
 				<ul style={{maxHeight: this.props.maxHeight ? this.props.maxHeight + 'px' : '100%'}} className={!this.props.disabled ? styles.enabled : styles.disabled}>
-					{this.state.items.map((value:any, index:number) => {
-						return (
-							<li
-								ref={this.registerRef}
-								key={index}
-								draggable={!this.props.disableDragAndDrop && !this.props.disabled}
-								style={{cursor: !this.props.disableDragAndDrop && !this.props.disabled ? 'pointer' : 'default'}}
-							>{this.renderItem(value,index)}</li>
-						);
-					})}
-					{this.state.items.length &&
-						<div className={styles.lastBox} ref={(ref:HTMLElement) => {this._lastBox = ref;}}/>
+          {
+            (this.state.items && this.state.items.length >= 0) && (
+              this.state.items.map((value:any, index:number) => {
+                return (
+                  <li
+                    ref={this.registerRef}
+                    key={index}
+                    draggable={!this.props.disableDragAndDrop && !this.props.disabled}
+                    style={{cursor: !this.props.disableDragAndDrop && !this.props.disabled ? 'pointer' : 'default'}}
+                  >{this.renderItem(value,index)}</li>
+                );
+              })
+            )
+          }
+					{
+            (this.state.items && this.state.items.length) && <div className={styles.lastBox} ref={(ref:HTMLElement) => {this._lastBox = ref;}}/>
 					}
 				</ul>
 			</div>
@@ -119,16 +124,31 @@ export default class PropertyFieldOrderHost extends React.Component<IPropertyFie
 				/>
 			</div>
 		);
-	}
+  }
+
+  public componentWillMount(): void {
+    this.setState({
+      items: this.props.items || []
+    });
+  }
 
 	public componentDidMount(): void {
 		this.setupSubscriptions();
 	}
 
+  public componentWillUpdate(nextProps: IPropertyFieldOrderHostProps): void {
+    // Check if the provided items are still the same
+    if (!isEqual(nextProps.items, this.state.items)) {
+      this.setState({
+        items: this.props.items || []
+      });
+    }
+  }
+
 	public componentDidUpdate(): void {
 		this.cleanupSubscriptions();
 		this.setupSubscriptions();
-	}
+  }
 
 	public componentWillUnmount(): void {
 		this.cleanupSubscriptions();
diff --git a/src/webparts/propertyControlsTest/PropertyControlsTestWebPart.ts b/src/webparts/propertyControlsTest/PropertyControlsTestWebPart.ts
index ea6abd37..8ca4687b 100644
--- a/src/webparts/propertyControlsTest/PropertyControlsTestWebPart.ts
+++ b/src/webparts/propertyControlsTest/PropertyControlsTestWebPart.ts
@@ -238,6 +238,13 @@ export default class PropertyControlsTestWebPart extends BaseClientSideWebPart<I
                   options: this.multiSelectProps,
                   selectedKeys: this.properties.multiSelect
                 }),
+                PropertyFieldOrder("asyncOrderItems", {
+                  key: "asyncOrderItems",
+                  label: "Async order items",
+                  items: this.properties.multiSelect,
+                  properties: this.properties,
+                  onPropertyChange: this.onPropertyPaneFieldChanged
+                }),
                 PropertyFieldCodeEditor('htmlCode', {
                   label: 'Edit HTML Code',
                   panelTitle: 'Edit HTML Code',