Dropdown icon X not appearing

[batata004]

Hi,

I used "gulp build" and removed the "icon" component. I am importing my icons directly from Font Awesome. The problem is that any dropdown element on my page with allowAdditions:true usually should appear with X at the right side so the user can remove the addition. However if I dont import the "icon" component no X is shown. See image below where in the addition "Branco" the X does not appear.

However if I add manually at the Chrome Dev Tools the class "icon-cancel" it works fine. Check image below:

I checked the documentation of dropdown and I see there is an option "selector" but I tried using it and nothing seemed to work:

$("select[name='cores\[\]']").dropdown({allowAdditions:true,,selector:{remove:".icon-cancel"}});

Any idea how I could accomplish that?

[lubber-de]

To make this work you currently also have to provide a custom template, which is rendering the labels and its integrated delete icon.
I have to admit, we should change the default template to make use of a classname setting instead of having this hardcoded. i think i'll prepare a PR to fix this.

So for now, please try

$("select[name='cores\[\]']").dropdown({
	allowAdditions:true,
	selector:{
		remove: '> .label > .icon-cancel.icon',		
	},
	templates: {
		label: function(value, text, preserveHTML) {
			var
				escape = $.fn.dropdown.settings.templates.escape;
			return escape(text,preserveHTML) + '<i class="icon-cancel icon"></i>';
		}
	}
});

[batata004]

@lubber-de I must say your suggestion worked like a charm! I cant believe how you pulled that. Even the documentation does not say anything about it, I just thought that changing the "selector" attribute would fix the problem but the template was indeed necessary.

Thanks a lot man, you are always saving the day :)