I have input fields where their value is correct, but it is not being rendered

Question

I made a plunker with the exact thing i am trying to accomplish, just where it works: http://embed.plnkr.co/Qjh4FLZY428Vvjc7koXf/ . Same version of riotjs and everything :/

I am taking over a code base using Riot.js, and there is this auto-complete tag looking like this:

    <autocomplete>
<div class="input-group {open : showResults}">
    <div class="input-group-addon">
        <i class="fa {opts.setup.iconclass}"></i>
    </div>
    <input type="text" name={opts.setup.name} class="form-control" onblur={opts.onblur} placeholder={opts.setup.placeholder} value={self.setup.valueSelected} onkeyup={keyup}/>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li each={res in results}><a href="#" onclick={valueSelected}>{res.title}</a></li>
    </ul>
</div>

<script>
var self = this;

self.timer = null;
self.showResults = false;
self.results = [];

var value = "";
self.keyup = function(e) {
    value = e.target.value;
    clearTimeout(self.timer)
    self.timer = setTimeout(self.performSearch, opts.setup.timeout);
}

self.performSearch = function() {
    if(value == "") {
        self.showResults = false;
        self.update();
    } else {
        $.ajax({
            url: opts.setup.url + encodeURIComponent(value),
            success: function(resp) {
                var data = resp;
                if(typeof(data) == "string") {
                    data = JSON.parse(resp);
                }

                if(!Array.isArray(data)) {
                    data = data[Object.keys(data)[0]];

                }

                self.results = data.map(function(obj) {
                    var str = "";

                    self.opts.setup.title.split(',').forEach(function(key) {
                        str += obj[key] + " ";
                    });
                    return {title: str, original: obj};
                });

                if(self.results.length > 0) {
                    self.showResults = true;
                    self.update();
                }
            },
            error: function(err) {
                console.log(err);
            }
        });
    }
}


self.valueSelected = function(e) {
    e.preventDefault();
    self.showResults = false;
    self.update();
    opts.setup.callback(e.item.res.original, opts.fieldName);
}
</script>
</autocomplete>

From the outside we simply render it with:

self.addressac = {
    name: "form.Address",
    iconclass: "fa-map",
    placeholder: "Find addresse",
    selectedValue: "",
    timeout: 1000,
    url: "https://someendpoint?q=",
    title: "tekst",
    callback: function(selectedValue) {
        self.addressac.selectedValue = selectedValue.tekst;

        self.order.Address = selectedValue.adresse.vejnavn;
        self.order.Number = selectedValue.adresse.husnr;
        self.order.AddressUUID = selectedValue.adresse.id;
        if(selectedValue.adresse.etage != null) {
            self.order.Floor = selectedValue.adresse.etage;
            if(selectedValue.adresse['dør'] != null) {
            self.order.Floor = self.order.Floor + " " + selectedValue.adresse['dør'];
            }
        }
        self.order.Zip = selectedValue.adresse.postnr;
        RiotControl.trigger('reports-on-address', self.order.AddressUUID);
        RiotControl.trigger('order-associationcvr-from-address', selectedValue.adresse);
        self.update();
    }
};

and the component are being rendered as:

                    <autocomplete setup={addressac}> </autocomplete>

What is really weird is that the self.update() works, because it sets the autocomplete input fields value attribute to the correct new value selected from the dropdown, but it doesn't render the value attribut in the html, it just keeps rendering its initial value. Have anyone tried similar with Riot.js?

Answer 1

解决方案是将riot.js版本2.3。*更新到最新版本，即3.6。