Refit the iron-dropdown when items or input changes.

If the dropdown is opened when there are initially 0 items and new items
are added while it is open, the dropdown doesn't expand to accomodate
the new items. This manifests in the SMB share dialog where share
discovery is happening in the background. If the user opens the dropdown
while the discovery is in progress, the dropdown will not be expanded
when share are discovered. The user needs to close and re-open the
dropdown to see the discovered shares.

BUG=None

Change-Id: I71c85466145301fd25366138711c43e478457210
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1627849Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Commit-Queue: Anand Mistry <amistry@chromium.org>
Cr-Commit-Position: refs/heads/master@{#664065}

ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.js

@@ -39,7 +39,10 @@ Polymer({
     placeholder: String,
 
     /** @type {!Array<string>} */
-    items: Array,
+    items: {
+      type: Array,
+      observer: 'onItemsChanged_',
+    },
 
     /** @type {string} */
     value: {
@@ -58,6 +61,37 @@ Polymer({
 
     /** @type {boolean} */
     updateValueOnInput: Boolean,
+
+    /** @private {boolean} */
+    dropdownRefitPending_: Boolean,
+  },
+
+  /**
+   * Enqueue a task to refit the iron-dropdown if it is open.
+   * @suppress {missingProperties} Property refit never defined on dropdown
+   * @private
+   */
+  enqueueDropdownRefit_: function() {
+    const dropdown = this.$$('iron-dropdown');
+    if (!this.dropdownRefitPending_ && dropdown.opened) {
+      this.dropdownRefitPending_ = true;
+      setTimeout(() => {
+        dropdown.refit();
+        this.dropdownRefitPending_ = false;
+      }, 0);
+    }
+  },
+
+  /**
+   * @param {!Array<string>} oldValue
+   * @param {!Array<string>} newValue
+   * @private
+   */
+  onItemsChanged_: function(oldValue, newValue) {
+    // Refit the iron-dropdown so that it can expand as neccessary to
+    // accommodate new items. Refitting is done on a new task because the change
+    // notification might not yet have propagated to the iron-dropdown.
+    this.enqueueDropdownRefit_();
   },
 
   /** @private */
@@ -72,6 +106,15 @@ Polymer({
     if (this.updateValueOnInput) {
       this.value = this.$.search.value;
     }
+
+    // iron-dropdown sets its max-height when it is opened. If the current value
+    // results in no filtered items in the drop down list, the iron-dropdown
+    // will have a max-height for 0 items. If the user then clears the input
+    // field, a non-zero number of items might be displayed in the drop-down,
+    // but the height is still limited based on 0 items. This results in a tiny,
+    // but scollable dropdown. Refitting the dropdown allows it to expand to
+    // accommodate the new items.
+    this.enqueueDropdownRefit_();
   },
 
   /**
@@ -118,4 +161,4 @@ Polymer({
     return errorMessage;
   },
 
-});
+});
\ No newline at end of file