CODEWITHSUNDEEP
javascriptjquerygoogle-chromeknockout.js
Slim
Slim

Reputation: 1744

strange dropdown behavior in google chrome

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:
enter image description here
And when I click it again(now with the full list)
enter image description here

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

Upvotes: 2

Views: 354

Answers (1)

Charlie
Charlie

Reputation: 575

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.

Upvotes: 1

Related Questions