Permit data-foo attribute to be keep

[khellendros74]

Creating a Option element with extra attribute

<select id="mySelect">
<option data-foo="otherdata1" value="1">One</option>
</select>
...
new TomSelect("#mySelect", {});

let option = new Option("Two", 2);
option.setAttribute("data-foo", "otherdata2");
select.tomselect.addOption(option);

option = new Option("Three", 3);
option.setAttribute("data-foo", "otherdata3");
select.option.add(option);

now what ever way it was created, selected option is missing data-foo

let selectedOption = document.getElementById("mySelect").querySelector('option:checked');
selectedOption.getAttribute("data-context");

i found something about "dataAttr" in the documentation but did not found a way to use it

[khellendros74]

somewhere lost in documentation
https://tom-select.js.org/examples/options/

[james-em]

It doesn't answer at all the question and it's not written in the mentioned link or no longer is.

Edit: #444

[jaguilarsn]

Hola tuve el mismo problema y con la función escape consegui lo deseado dejo el ejemplo:
let opciones = [ { value: '1', text: 'a', customProp: 'D'}, { value: '2', text: 'b', customProp: 'O'}, { value: '3', text: 'c', customProp: 'X'}, { value: '4', text: 'd', customProp: 'F'}, { value: '5', text: 'e', customProp: 'S'} ] let selectHoraio = new TomSelect('#horario',{ options: opciones, render: { option: function(data, escape) { return ` ${escape(data.text)} `; }, item: function(data, escape) { return `${escape(data.text)}`; } } }); selectHoraio.on('change', function () { var nuevoValor = selectHoraio.getValue().toUpperCase().trim(); var valorPropiedad = selectHoraio.getOption(selectHoraio.getValue()).getAttribute('customProp'); console.log(valorPropiedad) console.log('Nuevo valor seleccionado:', nuevoValor); });