title: How to maintain focus in an input box after using mouse to select value from dropdown list
body: <p>I have an input box which relies on a Google API to suggest city/state combinations based on what user types.  When user selects a Google suggested city/state combination from a dropdown list of possible options with a mouse (this issue doesn't exist if user makes his selection using up/down arrow keys), the input box for some reason loses focus.  How can we ensure that input box maintains focus after user selects the correct value from the Google dropdown using the mouse?  Here's my html code:</p>
  
  <pre><code>                      &lt;div class="col-md-4 col-sm-12 col-xs-12"&gt;
                      &lt;div class="form-group"&gt;
                        &lt;input gp-gac="{ types: ['(cities)'],  componentRestrictions: { country: 'US' }}" class="form-control"
                          ng-model="home_ctrl.location"
                          gp-components="{ locality: 'long_name', administrative_area_level_1: 'short_name' }"
                          gp-callback="home_ctrl.gpSearchCb(result, place)"
                          vs-city="home_ctrl.city"
                          vs-state="home_ctrl.state"
                          placeholder="City, State"
                          id="txtCity"&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  </code></pre>
  
  <p>I tried to include an onclick event inside the input tag</p>
  
  <pre><code>onclick = "putFocus()"
  </code></pre>
  
  <p>which references the following function in my javascript code:</p>
  
  <pre><code>function putFocus(){
    document.getElementByd("txtCity").focus()
  }
  </code></pre>
  
  <p>But that didn't seem to do the trick either.  Appreciate some help.</p>