config_service: focus search bar on page load

appengine/config_service/ui/src/config-ui/front-page.html

 <!--
   Copyright 2017 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 -->
 
 <link rel="import" href="../../bower_components/app-layout/app-layout.html">
 <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-search/paper-search-bar.html">
@@ skipping 54 matching lines @@
     <iron-ajax
         id="requestConfigs"
         url="/_ah/api/config/v1/config-sets?include_last_import_attempt=true"
         handle-as="json"
         on-error="_onRequestError"
         on-response="_onGotConfigSets"
         headers="[[auth_headers]]">
     </iron-ajax>
     
     <div class="search-bar">
-      <paper-search-bar 
+      <paper-search-bar
+          id = "searchBar"
           query="{{query}}"
           hide-filter-button="true"></paper-search-bar>
     </div>
     
     <div class="config-list">
       <template is="dom-if" if="[[isLoading]]">
         <div class="center loading">
           <paper-spinner active></paper-spinner>
         </div>
       </template>
@@ skipping 56 matching lines @@
       },
 
       ready: function() {
         if (!this.initialized) {
           document.addEventListener('fetch-configs', function() {
             this.$.requestConfigs.generateRequest();
           }.bind(this));
         } else {
           this.$.requestConfigs.generateRequest();
         }
+        setTimeout(function() {
+          this.$['searchBar'].focus();

[Sergey Berezin, 2017/07/31 18:37:15]

Any reason why focus is inside a timeout rather than called directly?

[ayanaadylova, 2017/07/31 18:51:52]

Calling focus directly does not actually focus on the search bar. I think it is
because <paper-search-bar> is not ready when we try to focus on it (despite
being inside this custom element's ready callback). Instead of setting timeout I
can also add event listener to the WebComponentsReady that would be called when
all components are initialized.  

[Sergey Berezin, 2017/07/31 20:31:45]

Indeed, I'd prefer an event trigger rather than a timeout, it's more reliable.

+        }.bind(this), 0);
       },
 
       _onSignIn: function() {
         if (this.signed_in) {
           this.isLoading = true;
           this.$.requestConfigs.generateRequest();
         }
       },
 
       _formatName: function(name) {
@@ skipping 45 matching lines @@
         var tempResults = this.configSetList.filter(e => e.config_set.includes(this.query));
         tempResults.sort(function(a, b) {
           return this._formatName(a.config_set).localeCompare(this._formatName(b.config_set));
         }.bind(this));
         this.searchResults = tempResults;
       },
 
     });
   </script>
 </dom-module>