strange dropdown behavior in google chrome

Question

I have this combobox HTML:

<select class="selects" name="projectTown" id="projectTown" 
  data-bind="options:availableTowns, value: projectTown, click: loadComboValues">
</select> 

As you can see, when the dropbox is clicked I'm executing the loadComboValues function.

Here it is:

loadComboValues = function(){
          if(isForUpdate() == "yes"){
              availableTowns([]);
              availableTowns.push("1");
              availableTowns.push("2");
              availableTowns.push("3");
              availableTowns.push("4");
              availableTowns.push("5");
              availableTowns.push("6");
           }
};

What I'm doing is to re-populate the combo box values(I really have to do this only when the combobox is clicked). It seems to be working, but there is as strange behavior in google chrome.On the 1st click I can't see all the values, so I have to click again in order to load the full list of options. Here is an example:

After the 1st click:

And when I click it again(now with the full list)

What am I missing here? I know that it should be something really small and simple, but I'm not able to spot it.

Answer 1

It seems to work as desired if you use a focus event binding instead of click (tested in Chrome on Windows):

<select class="selects" name="projectTown" id="projectTown" 
  data-bind="event: { focus: loadComboValues }, options:availableTowns, value: projectTown">
</select>

JSFiddle: http://jsfiddle.net/7hVAv/5/

Edit (thanks to Robert Slaney's comment):

This only works if you can update the options synchronously (for instance: from another part of your application that's already been loaded into the browser). An ajax request initiated from here will most likely fail in the same way the click handler is failing, because it releases control back to the browser before the options are updated.