Some input components don't get rendered with the value set to them when using setValue?

edited September 2013 in Newbie Questions
In the following demo you can create input components either by clicking the button or by pressing return/enter inside an input, everything works as expected except if you press return inside the lowest input at any given time, if I do that a new input will be created as expected but the one you were in isn't rendered with a value (try hitting return a few times if no problem occurs on the first try), how come?

Also, is it really necessary to re-set values using .setValue() every time I do .render()?

jsFiddle: http://jsfiddle.net/nxYMH/1/

Code:
enyo.kind({
name: "App",
kind: "FittableRows",
fit: true,
components:[
{kind: "rwList"}
]
});

enyo.kind({
name: "rwList",
itemKind: "rwListItem",
components:[
{kind: "onyx.Button", content: "onyx.Button", onclick: "createNode"},
{tag: "ul", name: "goals"}
],
create: function() {
this.inherited(arguments);
this.createNode(-1);
},
createNode: function(order) {
if (order == this.$.goals.children.length-1) {
this.createComponent({tag:"li", container: this.$.goals});
this.createComponent({kind:this.itemKind, value: String(Math.round(Math.random()*10)), container: this.$.goals.children[this.$.goals.children.length-1]});
} else {
var c = this.createComponent({tag:"li"});
this.$.goals.addChild(c, order);
this.createComponent({kind:this.itemKind, value: String(Math.round(Math.random()*10)), container: c});
}
this.render();
for (var x = 0; x < this.$.goals.children.length; x++) {
this.$.goals.children[x].children[0].order = x;
var v = this.$.goals.children[x].children[0].value;
if (v == undefined) v = "
"; this.$.goals.children[x].children[0].$.input.setValue(v); } this.$.goals.children[order+1].children[0].$.input.focus(); }, }); enyo.kind({ name: "rwListItem", components: [ {kind: "onyx.RichText", name: "input", style: "border: 1px solid blue;", defaultFocus: true, onchange: "textChange", onkeydown: "keyDown", oninput: "input", onchange: "change"} ], create: function() { this.inherited(arguments); //this.$.input.setValue(this.value); }, keyDown: function(inSender, inEvent) { if (inEvent.keyCode == 13) { inEvent.preventDefault(); this.owner.createNode(this.order); } }, input: function(inSender, inEvent) { this.value = inSender.getValue(); } }); // render two, they're small new App().renderInto(document.getElementById("a"));

Comments

  • 1) it's generally not a kosher idea to be directly manipulating controls through the children array.

    2) you hook up createNode as an event handler, but it lacks the standard (onSender, onEvent) parameters so it gets an invalid value when you click on the button to activate it.

    3) addChild is a protected function, so should not be called.

    4) You should use the setValue method instead of directly accessing the value property.

    Here's an updated version of your fiddle. http://jsfiddle.net/nxYMH/3/

    It uses a custom onAddNode event to let the rwListItem tell its owner to add a node without that component needing to know the structure of the node.

    I didn't see a good way to implement your feature of adding the node after the one where you hit enter without directly using the children array, something you shouldn't do. I made an alternate here where you use a repeater and a data model at http://jsfiddle.net/nxYMH/4/


  • Thanks, everything is working as expected now, but I think I found a bug in Enyo nightly.

    If I use Enyo 2.2 to get the value of an input component through .getValue() called through the oninput event (when I start writing stuff into the input) I get the correct value, but if I use Enyo nightly the latest character is missing from the string returned by .getValue().

    (Try writing in the input and observe console.log output):
    Enyo 2.2: http://jsfiddle.net/nxYMH/5/
    Enyo Nightly: http://jsfiddle.net/nxYMH/6/
  • That looks to be an issue with when we refresh the value property of the RichText. The newer code in nightly is doing it as part of the onkeyup event, reading the current value out of the DOM. This event is dispatched after the oninput event which is what you're catching. This was part of work (https://github.com/enyojs/enyo/commits/master/source/ui/RichText.js) around April to make bindings from RichText fields work.

    Can you try a local version of nightly and set oninput in the handlers block for enyo,RichText to be "updateValue" instead of null?
Sign In or Register to comment.