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

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="/controls/pref_control_behavior.html">
 <link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/md_select_css.html">
 <link rel="import" href="/prefs/pref_util.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-dropdown-menu">
   <template>
     <style include="settings-shared md-select"></style>
     <div class="md-select-wrapper">
       <select class="md-select" id="dropdownMenu" on-change="onChange_"
-          value="[[selected_]]"
           disabled="[[shouldDisableMenu_(disabled, menuOptions)]]">
         <template is="dom-repeat" items="[[menuOptions]]">
           <option value="[[item.value]]">[[item.name]]</option>
         </template>
         <option value="[[notFoundValue_]]"
-            hidden$="[[!isSelectedNotFound_(selected_)]]">
+            hidden$="[[!showNotFoundValue_(menuOptions, pref.value)]]"

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

showNotFoundValue is performing an O(n) search, for every element in the array,
which means O(n^2). It is also called twice per element so basically O(2*n^2).
Can we do something smarter than Array#find(). Some lists are pretty big, for
example the fonts lists.

[dpapad, 2016/10/25 01:13:32]

Ah, just noticing, this <option> is outside of the dom-repeat, so disregard my
comment about n^2. 

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

The search is O(n) and happens:
  twice whenever menuOptions is set (once for hidden, once for disabled)
  twice whenever pref.value is set (once for hidden, once for disabled)

Is the dom-repeat above this option throwing you off, or am I missing something?

I'm afraid that smarter things, like using selectedIndex, risk hitting edge
cases when menuOptions changes.

+            disabled="[[!showNotFoundValue_(menuOptions, pref.value)]]">

[dpapad, 2016/10/25 01:18:09]

So to avoid calculating the same boolean twice, can we use CSS for this? See
example at https://jsfiddle.net/5bt02py5/1/

[michaelpg, 2016/10/26 01:23:10]

Nice, done.

           $i18n{custom}
         </option>
       </select>
       <span class="md-select-underline"></span>
     </div>
   </template>
   <script src="settings_dropdown_menu.js"></script>
 </dom-module>