Dropdown: Correctly updating set-size when number of options updates …

…after first render (#14415)

#### Pull request checklist

- [x] Addresses an existing issue: Fixes #14375 
- [x] Include a change request file using `$ yarn change`

#### Description of changes

If options were added after the initial render of the `Dropdown` the `aria-setsize` attribute's value was not changing because the check to update the cache was being done in `UNSAFE_componentWillReceiveProps` where `newProps.options` was always the same as `this.props.options`. This PR fixes the issue by creating a cache of the options and comparing against this cache on subsequent renders.

#### Focus areas to test

(optional)

change/@fluentui-react-next-2020-08-07-16-17-16-dropdownSizePosCache.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Dropdown: Correctly updating set-size when number of options updates after first render.",
+  "packageName": "@fluentui/react-next",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-08-07T23:17:16.796Z"
+}

change/office-ui-fabric-react-2020-08-07-16-17-16-dropdownSizePosCache.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Dropdown: Correctly updating set-size when number of options updates after first render.",
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-08-07T23:17:13.524Z"
+}

packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx

@@ -205,12 +205,6 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
         selectedIndices: this._getSelectedIndexes(newProps.options, newProps[selectedKeyProp]),
       });
     }
-
-    if (
-      newProps.options !== this.props.options // preexisting code assumes purity of the options...
-    ) {
-      this._sizePosCache.updateOptions(newProps.options);
-    }
   }
 
   public componentDidUpdate(prevProps: IDropdownProps, prevState: IDropdownState) {
@@ -249,6 +243,11 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
     // eslint-disable-next-line deprecation/deprecation
     const onRenderPlaceholder = props.onRenderPlaceholder || props.onRenderPlaceHolder || this._onRenderPlaceholder;
 
+    // If our cached options are out of date update our cache
+    if (options !== this._sizePosCache.cachedOptions) {
+      this._sizePosCache.updateOptions(options);
+    }
+
     const selectedOptions = getAllSelectedOptions(options, selectedIndices);
     const divProps = getNativeProps(props, divProperties);
 

packages/office-ui-fabric-react/src/components/Dropdown/utilities/DropdownSizePosCache.ts

@@ -11,6 +11,7 @@ import { IDropdownOption, DropdownMenuItemType } from '../Dropdown.types';
  * cache should provide a little bit of relief.
  */
 export class DropdownSizePosCache {
+  private _cachedOptions: IDropdownOption[];
   private _displayOnlyOptionsCache: number[];
   private _size = 0;
 
@@ -30,6 +31,7 @@ export class DropdownSizePosCache {
 
     this._size = size;
     this._displayOnlyOptionsCache = displayOnlyOptionsCache;
+    this._cachedOptions = [...options];
   }
 
   /**
@@ -39,6 +41,13 @@ export class DropdownSizePosCache {
     return this._size;
   }
 
+  /**
+   * The chached options array.
+   */
+  public get cachedOptions(): IDropdownOption[] {
+    return this._cachedOptions;
+  }
+
   /**
    * Returns the position of this option element relative to the full set of selectable option elements.
    * Note: the first selectable element is position 1 in the set.

packages/react-next/src/components/Dropdown/Dropdown.base.tsx

@@ -204,12 +204,6 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
         selectedIndices: this._getSelectedIndexes(newProps.options, newProps[selectedKeyProp]),
       });
     }
-
-    if (
-      newProps.options !== this.props.options // preexisting code assumes purity of the options...
-    ) {
-      this._sizePosCache.updateOptions(newProps.options);
-    }
   }
 
   public componentDidUpdate(prevProps: IDropdownProps, prevState: IDropdownState) {
@@ -248,6 +242,11 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
     // eslint-disable-next-line deprecation/deprecation
     const onRenderPlaceholder = props.onRenderPlaceholder || props.onRenderPlaceHolder || this._onRenderPlaceholder;
 
+    // If our cached options are out of date update our cache
+    if (options !== this._sizePosCache.cachedOptions) {
+      this._sizePosCache.updateOptions(options);
+    }
+
     const selectedOptions = getAllSelectedOptions(options, selectedIndices);
     const divProps = getNativeProps(props, divProperties);
 

packages/react-next/src/components/Dropdown/utilities/DropdownSizePosCache.ts

@@ -11,6 +11,7 @@ import { IDropdownOption, DropdownMenuItemType } from '../Dropdown.types';
  * cache should provide a little bit of relief.
  */
 export class DropdownSizePosCache {
+  private _cachedOptions: IDropdownOption[];
   private _displayOnlyOptionsCache: number[];
   private _size = 0;
 
@@ -30,6 +31,7 @@ export class DropdownSizePosCache {
 
     this._size = size;
     this._displayOnlyOptionsCache = displayOnlyOptionsCache;
+    this._cachedOptions = [...options];
   }
 
   /**
@@ -39,6 +41,13 @@ export class DropdownSizePosCache {
     return this._size;
   }
 
+  /**
+   * The chached options array.
+   */
+  public get cachedOptions(): IDropdownOption[] {
+    return this._cachedOptions;
+  }
+
   /**
    * Returns the position of this option element relative to the full set of selectable option elements.
    * Note: the first selectable element is position 1 in the set.