visibleIndex same as index?

[alvarotrigo]

For some reason the visible index is always the same as the index on the data coming from labelRenderer and sampleLabelRenderer.

Shouldn't one of those values reflect the value of the dropdown item on the DOM?

Demo here (Scroll until the last item on the list) https://jsfiddle.net/1be6ps5g/

Code for reproduction:

VirtualSelect.init({
 ele: '#sample-select',
  options: [
    { label: 'Options 1', value: '1' },
    { label: 'Options 2', value: '2' },
    { label: 'Options 3', value: '3' },
    { label: 'Options 1', value: '1' },
    { label: 'Options 2', value: '2' },
    { label: 'Options 3', value: '3' },
    { label: 'Options 1', value: '1' },
    { label: 'Options 2', value: '2' },
    { label: 'Options 3', value: '3' },
    { label: 'Options 1', value: '1' },
    { label: 'Options 2', value: '2' },
    { label: 'Options 3', value: '3' },
    { label: 'Options 1', value: '1' },
    { label: 'Options 2', value: '2' },
    { label: 'Options 3', value: '3' },
    { label: 'Options 1', value: '1' },
    { label: 'Options 2', value: '2' },
    { label: 'Options 3', value: '3' },
    { label: 'Options 1', value: '1' },
    { label: 'Options 2', value: '2' },
    { label: 'Options 3', value: '3' },
    { label: 'Slabo 27px', value: '1' },
    { label: 'Chokokutai', value: '2' },
    { label: 'Rubik Wet Paint', value: '3' },
  ],
  labelRenderer: sampleLabelRenderer,
  selectedLabelRenderer: sampleLabelRenderer
});

function sampleLabelRenderer(data) {

  console.log(data);

  return `${data.label}`;
}

[alvarotrigo]

As a workaround I'm forced to do this now:

function sampleLabelRenderer(data) {
     var optionItem = document.querySelector('.vscomp-option-text[data-tooltip="'+data.label+'"]').parentNode;
     var domIndex = Array.prototype.indexOf.call(document.querySelectorAll('.vscomp-option'), optionItem.parentNode);

     console.log(domIndex);
}