settings-dropdown-menu must set <select>#value after its options change

chrome/browser/resources/settings/controls/settings_dropdown_menu.js

Index: chrome/browser/resources/settings/controls/settings_dropdown_menu.js
diff --git a/chrome/browser/resources/settings/controls/settings_dropdown_menu.js b/chrome/browser/resources/settings/controls/settings_dropdown_menu.js
index 06061fbffc0d797738e2980f8d4ea43bbf9e7498..790ae928641c40bd35f4bca0b3ed78584409565c 100644
--- a/chrome/browser/resources/settings/controls/settings_dropdown_menu.js
+++ b/chrome/browser/resources/settings/controls/settings_dropdown_menu.js
@@ -47,12 +47,6 @@ Polymer({
     },
 
     /**
-     * The current selected value, as a string.
-     * @private
-     */
-    selected_: String,
-
-    /**
      * The value of the 'custom' item.
      * @private
      */
@@ -75,13 +69,13 @@ Polymer({
    * @private
    */
   onChange_: function() {
-    this.selected_ = this.$.dropdownMenu.value;
+    var selected = this.$.dropdownMenu.value;
 
-    if (this.selected_ == this.notFoundValue_)
+    if (selected == this.notFoundValue_)
       return;
 
     var prefValue = Settings.PrefUtil.stringToPrefValue(
-        this.selected_, assert(this.pref));
+        selected, assert(this.pref));
     if (prefValue !== undefined)
       this.set('pref.value', prefValue);
   },
@@ -99,22 +93,30 @@ Polymer({
       return menuItem.value == prefValue;
     });
 
-    // Need to wait for the dom-repeat to render, before assigning a value to
-    // |selected_|, otherwise select#value is not populated correctly.
+    // Wait for the dom-repeat to populate the <select> before setting
+    // <select>#value so the correct option gets selected.
     this.async(function() {
-      this.selected_ = option == undefined ?
+      this.$.dropdownMenu.value = option == undefined ?

[dpapad, 2016/10/25 01:02:38]

Instead of removing the 1-way binding and directly assigning to |value|, could
we do a trick as described at
https://www.polymer-project.org/1.0/docs/devguide/model-data#override-dirty-c...
Essentially force the 1-way binding to fire even if the |selected_| value did
not actually change?

[michaelpg, 2016/10/25 01:14:37]

We could, but I'm not sure why we would. Either way, we need to set something to
the value of this expression; with the dirty check trick, we have to do another
set, and we have to bind that value to the <select> -- it doesn't gain us
anything if we have to enforce the binding manually anyhow.

I also prefer saying "Binding to <select> is dangerous, don't do it" rather than
"Binding to <select> is dangerous, so make sure you use this trick when you do
it."

[dpapad, 2016/10/25 01:30:48]

Ok, that's a fair point.

           this.notFoundValue_ :
           Settings.PrefUtil.prefToString(assert(this.pref));
     }.bind(this));
   },
 
   /**
-   * @param {string} selected
+   * @param {?DropdownMenuOptionList} menuOptions
+   * @param {string} prefValue
    * @return {boolean}
    * @private
    */
-  isSelectedNotFound_: function(selected) {
-    return this.menuOptions.length > 0 && selected == this.notFoundValue_;
+  showNotFoundValue_: function(menuOptions, prefValue) {
+    // Don't show "Custom" before the options load.
+    if (!menuOptions || !menuOptions.length)
+      return false;
+
+    var option = menuOptions.find(function(menuItem) {
+      return menuItem.value == prefValue;
+    });
+    return !option;
   },
 
   /**