[Bug]: Multiple TomSelect instances: second select shows wrong render.item template (uses first instance’s item renderer)

[Shan-Lin-01951]

Bug description

Description / Problem
I’m creating two TomSelect instances with different render.item functions.
The first select (#acting-person) correctly uses itemRender.
However, the second select (#acting-person2) also displays items using itemRender instead of itemRender2.

So it looks like the render.item template from the first instance is being reused by the second instance (even though I pass a different renderer when creating it).

Expected behavior

#acting-person uses itemRender
#acting-person2 uses itemRender2
Actual behavior

#acting-person uses itemRender (correct)
#acting-person2 also uses itemRender (wrong; should be itemRender2)
Reproduction code

HTML


js
function selectSearch(objectId, valueField, searchField, options, renderOption, renderItem) {

let defaultRender = function (data, escape) {
return '

' +
'' + escape(data.title || '') + '' +
'' + escape(data.serial || '') + '' +
'

';
};

let defaultItemRender = function (data, escape) {
return '

' + escape(data.title || '') + '

';
};

return new TomSelect(objectId, {
sortField: {
field: "text",
direction: "asc"
},
valueField: valueField,
searchField: searchField || [],
options: options || [],
render: {
option: renderOption || defaultRender,
item: renderItem || defaultItemRender
}
});
}

let optionRender = function (data, escape) {
return '

' +
'' + escape(data.EmpID) + '' +
'' + escape(data.Name) + '' +
'

';
};

let itemRender = function (data, escape) {
return '

' + escape(data.EmpID || '') + '

';
};

let optionRender2 = function (data, escape) {
return '

' +
'' + escape(data.EmpID) + '' +
'' + escape(data.ExtNo) + '' +
'

';
};

let itemRender2 = function (data, escape) {
return '

' + escape(data.EmpID || '') + '

';
};

let optionList = [
{ EmpID: '0001', Name:'a', ExtNo:'1' },
{ EmpID: '0002', Name:'b', ExtNo:'2' }
];

selectSearch('#acting-person', 'EmpID', ['EmpID', 'Name'], optionList, optionRender, itemRender);
selectSearch('#acting-person2', 'EmpID', ['EmpID', 'ExtNo'], optionList, optionRender2, itemRender2);

Expected behavior

Open #acting-person and select an option → the selected item is rendered with itemRender
Open #acting-person2 and select an option → the selected item is still rendered with itemRender itemRender2.

Steps to reproduce

Initialize both TomSelect instances using the code above.
Open #acting-person and select an option → the selected item is rendered with itemRender (OK).
Open #acting-person2 and select an option → the selected item is still rendered with itemRender (NOT OK). It should use itemRender2.

Additional context

Version: Tom Select v2.3.1

[xJuvi]

Hey there,
please add a working codepen.io example on this issue. Also screenshots are very helpful.
In your example is the html code missing. With you (broken) js code i can't get a working instance, maybe it's only a copy&paste error.

Kind regards
Hannes