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

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

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * The |name| is shown in the gui.  The |value| us use to set or compare with
  * the preference value.
  * @typedef {{
  *   name: string,
  *   value: (number|string)
@@ skipping 29 matching lines @@
     },
 
     /** Whether the dropdown menu should be disabled. */
     disabled: {
       type: Boolean,
       reflectToAttribute: true,
       value: false,
     },
 
     /**
-     * The current selected value, as a string.
-     * @private
-     */
-    selected_: String,
-
-    /**
      * The value of the 'custom' item.
      * @private
      */
     notFoundValue_: {
       type: String,
       value: 'SETTINGS_DROPDOWN_NOT_FOUND_ITEM',
     },
   },
 
   behaviors: [
     PrefControlBehavior,
   ],
 
   observers: [
     'updateSelected_(menuOptions, pref.value)',
   ],
 
   /**
    * Pass the selection change to the pref value.
    * @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);
   },
 
   /**
    * Updates the selected item when the pref or menuOptions change.
    * @private
    */
   updateSelected_: function() {
     if (this.menuOptions === null || !this.menuOptions.length)
       return;
 
     var prefValue = this.pref.value;
     var option = this.menuOptions.find(function(menuItem) {
       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;
   },
 
   /**
    * @return {boolean}
    * @private
    */
   shouldDisableMenu_: function() {
     return this.disabled || this.menuOptions === null ||
         this.menuOptions.length == 0;
   },
 });