onChange not sufficient to trigger query from Dojo Combobox

http://stackoverflow.com/questions/12376192/onchange-not-sufficient-to-trigger-query-from-dojo-combobox

by phusick

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<div class="row">
    <label for="comboBox">dijit/form/ComboBox</label>
    <div id="comboBox"></div>
</div>

<div class="row claro">
    <label for="select">dijit.form.Select</label>
    <select id="select"></select>
</div>

<div class="row">
    <label for="filteringSelect">dijit.form.FilteringSelect</label>
    <div id="filteringSelect"></div>
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 11px;
    padding: 30px;
}

label {
    display: inline-block;
    width: 130px;
    text-align: left;
}

.row {
    margin: 8px 0;
}

JavaScript

require([
    "dojo/_base/declare",
    "dojo/dom-attr",
    "dojo/aspect",
    "dojo/store/Memory",
    "dijit/form/ComboBox",
    "dijit/form/Select",
    "dijit/form/FilteringSelect",
    "dojo/domReady!"    
], function(
    declare,
    domAttr,
    aspect,
    Memory,
    ComboBox,
    Select,
    FilteringSelect       
) {
    
    var memory = new Memory({ data: [
        { id: 1, label: "Option 1"},
        { id: 2, label: "Option 2"},
        { id: 3, label: "Option 3"},
        { id: 4, label: "Option 4"},              
        { id: 5, label: "Option 5"},
        { id: 6, label: "Option 6"} 
        ]  
    });
    
    
    /*
        dijit/form/ComboBox        
    */
    var comboBox = new ComboBox({
        store: memory,
        searchAttr: "label",
        autoComplete: false,
        selectOnClick: true,
        placeHolder: "Select an option"        
    }, "comboBox");
    
    comboBox.startup();
    
    var signal = aspect.after(comboBox, "openDropDown", function() {
        comboBox.dropDown.on("click", function(node) { 
            console.log("ComboBox -", "value:", comboBox.get("value"));  
            console.log(
                "ComboBox -",
                "selectedIndex:", 
                domAttr.get(node, "item"),
                "<= this is not a store identifier ('id')");                
        });            
        signal.remove();
    });
  
    
    /*
        dijit/form/Select
    */
    var select = new Select({
        store: memory,
        labelAttr: "label",
        style: "width:100px;"        
    }, "select");

    select.startup();
    
    select.dropDown.on("itemClick", function(dijit, event) {
        var node = dijit.domNode;
        console.log(domAttr.get(node, "data-dojo-attach-point"));
        // or
        console.log(node.dataset.dojoAttachPoint);
    });
    
    select.dropDown.on("execute", function() {
        setTimeout(function() {
            console.log("Select - ", "value:",...