Setting value of an input doesn't seem to work

[dom96]

No description provided.

[haltcase]

I just ran into this one, where value isn't reactive.

[Araq]

Depends on how you set it. setInputText works.

[haltcase]

This is turning out to be my primary issue with karax which is otherwise excellent. The value prop really doesn't work as I expect it to, while something like placeholder does.

The following is something that's been biting me for a while (on top of value simply not being reactive), maybe you can shed some light on it.

---

Here's a list of input(placeholder = "foo" & $i). If I remove items from the list before anything is typed into them it works as you'd expect — that specific element is removed. However once a value has been entered the element is removed but the value stays:

(mp4 link)

---

It's more obvious with a list of input(value = "foo" & $i) (where i comes from an object being rendered, not a list being modified that might affect the rendering):

(mp4 link)

Notice how no matter which element I remove, it's the last one in the list that seems to be affected (in terms of the input value, the color etc seems ok).

---

I don't think setInputText is the solution here. FWIW this worked without surprises when I built a simple example in React.

[Araq]

@citycide Please try to give the elements an id attribute as a workaround so that the diff algorithm doesn't "optimize" this.

[zedeus]

This doesn't work for server-side rendering either.

import karax/[karaxdsl, vdom]
echo buildHtml(input(`type`="text", value="test"))
echo buildHtml(input(`type`="text", value="test", id="test", placeholder="test"))

Output:

<input type="text"></input>
<input id="test" type="text" placeholder="test"></input>

[gogolxdong]

import karax / [vdom, karaxdsl, karax, jstrutils]

var value = 1          
proc createDom(): VNode =
    buildHtml(tdiv):
        kout value
        input(id=id,  placeholder = $v, value = $v)
        button(onclick = proc(e:Event, n:VNode) = 
            value.inc
            ): text "change"
   
setRenderer createDom

value should work like how placeholder works .

For those who wants to use input value as expected, including SSR, I found a workaround in karaxdsl.nim as following

          elif key in SpecialAttrs:
            result.add newDotAsgn(tmp, key, x[1])
            if key == "value":
              result.add newCall(bindSym"setAttr", tmp, newLit(key), x[1])

[kidandcat]

bump, this still has no solution

[nhanb]

Looks like commit f6bda9a didn't fix it. I can reproduce the bug with this snippet (cleaned up @gogolxdong's to compile correctly):

import karax / [vdom, karaxdsl, karax, jstrutils]

var v = 1

proc createDom(): VNode =
  buildHtml(tdiv):
    kout v
    input(id="myid",  placeholder = $v, value = $v)
    button(onclick = proc(e:Event, n:VNode) =
      v.inc
    ): text "change"

setRenderer createDom

Using karax 1.1.2 & nim devel.

[ajusa]

I can also reproduce on Karax 1.2.1. Not super sure what the best option is here, as it seems that Karax doesn't think that the value has changed so the input isn't redrawn correctly? Like if I do this

import karax / [kdom, vdom, karaxdsl, karax, jstrutils]
var v = 1
proc createDom(): VNode =
  buildHtml(tdiv):
    kout v
    input(id= $v, placeholder = $v, value = $v)
    button(onclick = proc(e:Event, n:VNode) =
      v.inc
    ): text "change"

setRenderer createDom

everything works fine, because the id changes so Karax knows to update the dom.

[jyapayne]

@ajusa this is actually an issue with HTML itself. For an input tag, value is only used once on page render. If you update the value property in regular JS, the same behavior can be observed, which is why you need something like my PR to update the dom value as well. Same goes for the checked property.