How to reset dojo CheckedMultiSelect

Question

The widget is inside the form, however

form.reset()

does not clear the previously selected values of CheckedMultiSelect.

var list = new CheckedMultiSelect({
    dropDown: true,
    labelText: 'States',
    multiple: true,
    name: 'state',
    onChange: getValues,
    required: false
}, "stateSelect");

I have tried code below but it doesnt work.

list.reset()

Thanks in advance

Answer 1

You can change the value of CheckedMultiSelect via list.set('value',[...]). The selection is updated immediately, when the list is not empty...

To clear the selection, call:

list.set('value',[]);
list._updateSelection();

Tested on Dojo 1.9.2.

Answer 2

It's because the dojox/form/CheckedMultiSelect did not implement the reset() behavior properly. Like Lukasz mentioned, it's only updating the selection when the list is not empty.

So, you could for example create your own implementation:

declare("dojox/form/FixedCheckedMultiSelect", [ CheckedMultiSelect ], {
    reset: function() {
        this.inherited(arguments);
        if (!this._resetValue || !this._resetValue.length) {
            this._updateSelection();
        }
    }
});

This will properly reset your field. Be aware though, when you reset your multiselect, it will reset to the default value. If, by default, you already selected certain options by using the selected attribute on your <option>, then it will reset to those values.

If you want to make sure that when it resets, it's always unchecking all items, then you should add a single line to your implementation so it becomes:

declare("dojox/form/FixedCheckedMultiSelect", [ CheckedMultiSelect ], {
    reset: function() {
        this._resetValue = [];
        this.inherited(arguments);
        if (!this._resetValue || !this._resetValue.length) {
            this._updateSelection();
        }
    }
});

I also made an example JSFiddle.