Updating INPUT's "value" doesn't work if it has been edited

[alexsad]

Updating INPUT's "value" doesn't work if it has been edited by the user.

    <input type="text" value="{$this.mytext?$this.mytext:'nothing changed'}">

    <button 
                   onclick="{$this.mytext='default text';alert($this.mytext);$this.refresh()}">
                    test change
     </button>

I found the same problem in these issue:
google/incremental-dom#239

[alexsad]

A temp solution is:
new String()
<input type="text" value="{new String($this.mytext?$this.mytext:'nothing changed')}"> <button click.trigger="$this.mytext='default text';alert($this.mytext);$this.refresh()">test change</button>

based in google/incremental-dom#239

[davidjamesstone]

This has been raised as an issue with incremental-dom.

I usually go with:

IncrementalDOM.attributes.value = function (el, name, value) {
  el.value = value === null || typeof (value) === 'undefined' ? '' : value
}

IncrementalDOM.attributes.checked = function (el, name, value) {
  el.checked = !!value
}

[alexsad]

so, I need put this here ?

import IncrementalDom = require('incremental-dom');

IncrementalDom.attributes.value = function (el, name, value) {
  el.value = value === null || typeof (value) === 'undefined' ? '' : value
}

IncrementalDom.attributes.checked = function (el, name, value) {
  el.checked = !!value
}

in the first js main file.

[alexsad]

I tried this without success .

[alexsad]

I tried these with no success too.

define(['exports', 'incremental-dom'], function (exports, IncrementalDOM) {

IncrementalDOM.attributes.value = function (el, name, value) {
  el.value = value === null || typeof (value) === 'undefined' ? '' : value
}

IncrementalDOM.attributes.checked = function (el, name, value) {
  el.checked = !!value
}

var patch = IncrementalDOM.patch
var elementOpen = IncrementalDOM.elementOpen
var elementClose = IncrementalDOM.elementClose
var skip = IncrementalDOM.skip
var currentElement = IncrementalDOM.currentElement
var text = IncrementalDOM.text

var hoisted1 = ["rel", "stylesheet", "href", "../dist/assets/mvcomponents.css"]
var hoisted2 = ["id", "asdf1", "draggable", "true", "style", "cursor:move;width:64px;height:64px;border:1px solid green;"]
var hoisted3 = ["id", "asdf2", "style", "height:50px;border:1px solid red"]
var hoisted4 = ["type", "text"]
var __target

exports.HelloWorld = (function () {
  return function HelloWorld ($this) {

  elementOpen("input", "12801f5a-fda8-4160-beed-d43893ced528", hoisted4, "value", $this.mytext?$this.mytext:'nothing changed')
  elementClose("input")
  elementOpen("button", null, null, "onclick", function ($event) {
    var $element = this;
  $event.preventDefault();$this.mytext='default text2';alert($this.mytext);$this.refresh()})
    text("test change")
  elementClose("button")
}
})()
});

[davidjamesstone]

Yes that works for me.

I can't test it at the moment but I know it works.

Is it even calling into the overriding function?

[ferrugemjs]

new String() works to me.....

google/incremental-dom#239

[alexsad]

I saw that the first time the overriding function is called still the user change input value.

[davidjamesstone]

Yes, I see what you mean - this doesn't seem to work like it used to.

Personally, I don't like the new String() method. I'd like to see it fixed in IncrementalDOM.

[alexsad]

It will be the guys it's incremental will fix it?
I understand the issue they have delegated the correction to the other guy who has a project that also converts to incremental.

[davidjamesstone]

I'm just revisiting this and overriding the value or checked props now seems to work.

I'm not sure what's going on here earlier, whether it was something I was doing wrong or an issue with IDOM but the following code is now working in 0.5.1 (as per the documentation)

IncrementalDOM.attributes.value = function (el, name, value) {
  el.value = value === null || typeof (value) === 'undefined' ? '' : value
}

IncrementalDOM.attributes.checked = function (el, name, value) {
  el.checked = !!value
}