onChange not sufficient to trigger query from Dojo Combobox

Question

this is closely related to this post: Is there an onSelect event or equivalent for HTML <select>?

...but specifically for the Dojo ComboBox..(I am using Dojo w/ ArcGIS JSAPI). I have three combo boxes, which populate the successors using queries triggered by the selections from the dropdown list. My problem is that if the second combobox selection remains the same, the query is not triggered. I have tried using onblur and several other events instead of onchange, and tried to reset the value of the selection in JS, but neither has worked. The value is reset but the combobox still acts as if the same value is there, so onchange does not work. I tried many of the methods in the link above, but none worked for me. As far as I can tell, my comboboxes do not generate any selectedIndex. Any suggestions? Thanks, J

Answer 1

All three dijits dijit/form/Select, dijit/form/FilteringSelect and dijit/form/ComboBox subclass dijit/_HasDropDown and that adds them a property dropDown:

// dropDown: [protected] Widget
//     The widget to display as a popup.  This widget *must* be
//     defined before the startup function is called.
dropDown: null

What you want is to listen on this dropDown widget. The problem is that in the case of ComboBox and FilteringSelect this widget dijit/form/_ComboBoxMenu gets instantiated lazily, i.e. when you open popup for the first time. So you need to hook to opening dropDown in the first place and then add onClick event listener to the dropDown:

var signal = aspect.after(comboBox, "openDropDown", function() {
    comboBox.dropDown.on("click", function(node) {
        console.log("value:", comboBox.get("value"));
        console.log("selectedIndex:", domAttr.get(node, "item"));  // <= this is not an identifier
    }
    signal.remove();  // remove aspect so it called only once
}

It's a bit easier when working with dijit/form/Select, because dropDown exists and you can listen to onExecute on its dropDown dijit/Menu immediately:

select.dropDown.on("execute", function() {
    setTimeout(function() {
        console.log("value:", select.get("value"))
    });
});

See all three in action at jsFiddle: http://jsfiddle.net/phusick/Hp5jr/