How to remove pre-select item in sn-choice-list

[Yee Tong Lam]

Hi,

Recently I trying to use sn-choice-list in widget with enable multiple select. But, every time when the page load it will make the placeholder become selected item (Please refer to attached image). Tried not to provide placeholder in the option, it still having same result in empty only. Same thing also happen if I empty the selected list.

Below is some of the sample code for reference for advice.

UI: 

HTML Code:

<sn-choice-list sn-model="c.country" multiple=true sn-options="c.countryOption" sn-value-field="value" sn-text-field="display" 
                          sn-items="c.data.countryList"></sn-choice-list>

Client Script:

c.countryOption = {
	hideSearch: false,
	placeholder: "Country"
};
	
c.data.CountryList = [{
	value:"malaysia",
	display:"Malaysia"
},{
	value:"singapore",
	display:"Singapore"
},{
	value:"thailand",
	display:"Thailand"
},{
	value:"japan",
	display:"Japan"
},{
	value:"hongkong",
	display:"HongKong"
}];

Regards,

Lam Yee Tong

[Marcin Mierzick]

Hello Lam Yee Tong!

Why don't you use below on onLoad client script?  

g_form.addOption(<fieldName>, <choiceValue>, <choiceLabel>, <targetIndex>);

I found some similar issues which can help you as well:

which variable type allows mulitple selection

How to add -Please Select- option under a select box variable on catalog item

And an article:

How to get multiple choice variable choice value and label via script

Regards,

Marcin

[Vamsi Sreenivas]

Hi @Yee Tong Lam ,

In your client script remove line that contains - placeholder: "Country".

So modified client script:

c.countryOption = {
	hideSearch: false,
};
	
c.data.CountryList = [{
	value:"malaysia",
	display:"Malaysia"
},{
	value:"singapore",
	display:"Singapore"
},{
	value:"thailand",
	display:"Thailand"
},{
	value:"japan",
	display:"Japan"
},{
	value:"hongkong",
	display:"HongKong"
}];

Mark my answer as HELPFUL / CORRECT if this help resolve your issue.

Regards,

Vamsi S

[Yee Tong Lam]

Hi @Marcin Mierzicki 

I'm doing it in widget not service catalog item. However I tried to put onLoad in client script, it doesn't have any effect. If I place the gFrom.addOption will as below.

c.countryOption = {
	hideSearch: false
};
	
c.data.CountryList = [{
	value:"malaysia",
	display:"Malaysia"
},{
	value:"singapore",
	display:"Singapore"
},{
	value:"thailand",
	display:"Thailand"
},{
	value:"japan",
	display:"Japan"
},{
	value:"hongkong",
	display:"HongKong"
}];

g_form.addOption('c.country', '', '--Please Select--', 0);
g_form.setValue('c.country','--Please Select --');

Hi @Vamsi Sreenivas,

I also tried to remove the placeholder, it just become blank as I mentioned in the initial topic You can refer below.

Regads,

Lam Yee Tong