Using setVal on select not working the first time

#1

I have a popup that contains a select where I want to select the entry by code before opening the popup.

The first time I do it and open the popup the entry is not selected in my select. If I close the popup and reopen it, the setVal is working.

Any idea on why I have this behaviour ?

Thanks

#2

Hello @Julien :wave:

Can you clarify the framework that you are using?

Also, make sure to share some of your relevant code, so we can see the exact usage.

#3

Hi,

I’m using mobiscroll 5.16, javascript version.

Based on this sample Javascript Event calendar Add/edit/delete events Example | Mobiscroll

When I create or edit an event the popup is opened, start and end datetime are hydrated and I try to do the same for the select but it doesn’t work the first time.

self.popup = mobiscroll.popup('#event-popup', {
    display: 'anchored',
    contentPadding: false,
    showArrow: false,
    onClose: self.onClose,
    onOpen: self.onOpen
});

self.employees = mobiscroll.select('#employees-list', {
    selectMultiple: true,
});

self.onOpen = function (args, inst) {
    // We have to call enhance because we are loading the fragment later with an xhr request
    mobiscroll.enhance(self.popupHTML);
    mobiscroll.getInst(self.allDaySwitch).checked = self.actualEvent.allDay || false;
    self.range.setVal([self.actualEvent.start, self.actualEvent.end]);

    self.client.getParticipants(self.requestId).then(data => {
          let participants = data.map(x => {
          let employee = {};
          employee.text = x.name;
          employee.value = x.id;
          return employee;
      });
      self.employees.setOptions({data: participants});
    });

    let selected = [];
    if (self.actualEvent.resource.constructor === Array) {
        selected = self.actualEvent.resource;
    } else {
        selected.push(self.actualEvent.resource);
    }

    self.employees.setVal(selected);
}
#4

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>
#5

Ok I found the problem, a part of my code was not in the last block of my promise but outside.

It works well, sorry for that.