I have an onyx.Picker which before selection displays a "Click to Select" button prompting the user for action. As is the expected behavior, once the user picks an option, they can not revert back to the "Click to Select" display. However, I need to be able to programmatically reset the form, in which case, the picker should once again revert to it's original state.
I have figured out that I can remove the picked option by calling this.$.PickerName.setSelected(null)
However, the UI does not revert back to the "Click to Select" display as would be expected. How can I reset the picker completely?
As far as i am aware, setSelected()
on the picker expects you to pass it a reference to the control (picker's clientControls) which you want to set dynamically ,so passing null
will do nothing. Once an item is selected, the list of items closes, but the item stays selected and the pickerButton
displays the choice that was made. So, all you have to do is this. this.$.pickerButton.setContent('Click to Select');
which will reset the pickerButton content.
http://jsfiddle.net/scrs3Le5/1/
enyo.create({
components: [{
kind: "onyx.PickerDecorator",
name: "DecoratorName",
components: [{
name:'pickerButton',
style: 'min-height:2.5rem;min-width:330px;',
content: "Click to Select"
}, {
kind: 'onyx.Picker',
name: 'PickerName',
components: [
{content: "Is broken"},
{content: "Is not cool"},
{content: "Is very very very very very very very cool!"}
]
}]
}, {
kind: 'Button',
ontap: 'ResetPicker',
content: 'ResetPicker'
}],
ResetPicker: function () {
//this.$.PickerName.setSelected(null);
this.$.pickerButton.setContent('Click to Select');
},
rendered: function () {
this.inherited(arguments);
}
}).renderInto(document.body);
Hope that helps!