I can’t reproduce the full issue, but I think we can start with this :
Look at the button click code, we use setVal and after we console.log(select.getVal())
The console shows an empty array the first time, close the popup reopen it, the console will show the selected values.
<html>
<head>
<link rel="stylesheet" href="mobiscroll.min.css" />
<script src="mobiscroll.javascript.min.js"></script>
</head>
<body>
<button mbsc-button id="btn-open">Open</button>
<div id="my-popup">
<div class="mbsc-form-group">
<label>
Countries
<input mbsc-input id="country-list" data-tags="true"/>
</label>
</div>
</div>
<script>
const popup = mobiscroll.popup('#my-popup', {
display: 'center'
});
const select = mobiscroll.select('#country-list', {
selectMultiple: true,
});
document.getElementById('btn-open')
.addEventListener('click', function () {
select.setOptions({
data: [
{ value: 'atl', text: 'Atlanta'},
{ value: 'ber', text: 'Berlin'},
{ value: 'bos', text: 'Boston'},
{ value: 'chi', text: 'Chicago'},
{ value: 'lon', text: 'London'},
]
});
select.setVal([ 'atl', 'ber' ]);
console.log(select.getVal());
popup.open();
});
</script>
</body>
</html>