Dojo Select onChange event firing when changing value programatically

Question

I have a dojo (dijit) select dropdown that calls a js function onChange. I was expecting this to only call the onChange function when the user changes the value in the dropdown, however, it even calls the onChange function when I programatically change the value of the dropdown from js code. How do I get it to only call the function when the user changes the dropdown value? It shouldn't call the function when I programatically change the value.

<select jsId="ddlBoundaryType" id="ddlBoundaryType" name="ddlBoundaryType" 
                            dojoType="dijit.form.Select">
                            <option value="0">Circle</option>
                            <option value="1">Polygon</option>
                        </select>

dojo.addOnLoad(InitBoundaries);
    function InitBoundaries() {
        dojo.connect(dijit.byId("ddlBoundaryType"), 'onChange', Boundaries_ChangeBoundaryType); 
    }

Thanks, Justin

Answer 1

I think the proper fix in this case for you would be http://bugs.dojotoolkit.org/ticket/10594, since it deals directly with dijit.form.Select. Of course, there are a few ways to fix this.

1. Upgrade dojo :).
2. Inherit dijit.form.Select and "patch" the _updateSelection function.
3. Extend dijit.form.Select and "patch" it directly there.

I will forgo the first. The the second and the third method are similar, so I will just post a simple fix using the third way,

dijit.form.Select.extend({
   _updateSelection: function() {
        this.value = this._getValueFromOpts();
        var val = this.value;
        if(!dojo.isArray(val)){
            val = [val];
        }
        if(val && val[0]){
            dojo.forEach(this._getChildren(), function(child){
                var isSelected = dojo.some(val, function(v){
                    return child.option && (v === child.option.value);
                });
                dojo.toggleClass(child.domNode, this.baseClass + "SelectedOption", isSelected);
                dijit.setWaiState(child.domNode, "selected", isSelected);
            }, this);
        }
   }
});

Note that I did not write this function, I happily plagiarized it from the source code with the last line, this._handleOnChange(this.value) removed.

myWidget.attr('value', newValue, false) // should now work without firing onChange.

Answer 2

Often people solve this by using the priorityChange flag:

myWidget.set("value", 1234, false);

That will solve your problem except for subtle issues where the value is originally 123, you set it programatically to 456, and then the user sets it back to 123, in which case there won't be an onChange() event for the user action either.

For that reason you can additionally do:

myWidget._lastValueReported=null;

Answer 3

A much simpler way is that, I would like to suggest the "_onChangeActive" flag, which is not recommended to be used, as it is serves internal purpose. But, if required, we could use it. "_onChangeActive" is a flag present in dojo Select type widgets, which is by default set to true. If this flag is set to true, the onChange event is triggered as usual. But, when it is set to false, the onChange event is not triggered, when the value is changed either by user or programatically.

e.g:

var widget = registry.byId('widget_id');
widget.set('_onChangeActive', false); // setting the flag to false
...//make changes to the select programatically
widget.set('_onChangeActive',true); // setting back to true after programatic changes are done

No need to inherit the existing dojo functionality for this or use separate external flags. The widget has one inbuilt for this - "_onChangeActive".