Can't work with the instance returned by VirtualSelect.init()?

[mjesteve]

Hi,
I'm still completing my VirtualSelect wrapper for Apache Royale [ #53 ], so far I've only worked with the initial options and some method like setServerOptions() [ #58 ] and everything has worked for me.
My implementation is based on the instance returned by VirtualSelect.init() --> myVs = VirtualSelec.init(opts);

Now, I'm trying to set a value, read the current selected value, etc, etc, and I've been stuck for almost two days because there are methods that don't work if I call them from the instance, like myVs.setValue(3);

The first thing I have done is to create a use case with vanilla js similar to the one I have implemented in my Royale application and I have verified that the behaviour is the same:

`
const arPages1 = [{nregpag:1}, {nregpag:2}, {nregpag:3}, {nregpag:4}, {nregpag:5}, {nregpag:6}, {nregpag:7}, {nregpag:8}, {nregpag:9}, {nregpag:10},
{nregpag:11}, {nregpag:12}, {nregpag:13}, {nregpag:14}, {nregpag:15}, {nregpag:16}, {nregpag:17}, {nregpag:18}, {nregpag:19}, {nregpag:20},
{nregpag:25}, {nregpag:30}, {nregpag:35}, {nregpag:40}, {nregpag:45}, {nregpag:50}, {nregpag:100}];

var misel =  VirtualSelect.init({
  ele: '#sample-select',
  options: arPages1,
  hideClearButton: true,
  optionsCount: 10,
  optionHeight:"35px",
  labelKey: "nregpag", valueKey: "nregpag",
  disabledOpions: [],
  dropboxWrapper: 'body',
  markSearchResults: true,
  optionsCount: 10,
  position: 'bottom',
  selectedValue: 20,
  showValueAsTags: false,
  zIndex:80
});

alert(document.getElementById('sample-select').value); //return 20
alert(misel.value); //return undefined

function getValue(){
  var myc = document.getElementById('sample-select');
  alert(myc.value); //return value selected
  alert(misel.value); //return undefined
}
function setValue(){
  var myc = document.getElementById('sample-select');
  myc.setValue(50); // selects the item with value=50 and displays it in textinput
  alert(myc.value); // return 50
  misel.setValue(100); // triggers change event but does not select the correct item
  alert(misel.value); //return undefined
}
`

Debugging the code I see that "myc.setValue(50)" launches the method "setValueMethod" and "misel.setValue(100)" launches "setValue".
Why don't they behave the same, what am I doing wrong, I can't work with the instance?

Thanks in advance for any help.

[sa-si-dev]

We can use instances to trigger any method.
Whenever we trigger any method with DOM element, internally it would get the instance from the DOM element and trigger the respective method.

When we call ele.setValue(), it would call instance.setValueMethod().

So check the relevant function and call with instance.

[mjesteve]

Thanks for replying sa-si-dev. I don't understand you, forgive me, be patient with me because I don't control too much js.

So check the relevant function and call with instance.

Isn't that what I'm doing?
I pick up the instance in --> var misel = VirtualSelect.init({ ele: '#sample-select', ...);
And I call the function from it --> misel.setValue(100);

What am I missing?

[sa-si-dev]

@mjesteve instance methods are different from DOM methods.

DOM method means, we would call it from the DOM element. e.g. document.querySelector('#sample-select').setOptions(options);

When we call a DOM method, it would take an instance from the DOM element and call the instance method internally.

e.g. DOM funcitonsetOptions() would call the instance method setOptionsMethod()

Refer setEleProps() for all DOM methods and their equelent instance methods.

[mjesteve]

Hi sa-si-dev, thanks for the clarification, I will look into it.