karaxnim / karax

Karax. Single page applications for Nim.
MIT License
1.07k stars 90 forks source link

input range/slider: initial value gets truncated to 100 if greater than 100 #118

Closed timotheecour closed 3 years ago

timotheecour commented 5 years ago

example

include karax / prelude
import karax / kdom

let id = "foo1"
let id2 = "foo2"
let valueInitial = "150" # fails: truncates to 100
# let valueInitial = "75" # works
proc updateText() =
  document.getElementById(id2).childNodes[0].nodeValue=document.getElementById($id).value
proc createDom(): VNode =
  result = buildHtml(tdiv):
    input(`type`="range", min = "10", max = "170", value = valueInitial, id = id):
      proc oninput(ev: Event; target: VNode) = updateText()
    tdiv(id=id2):
      text ""

proc postRender() = updateText()

setRenderer createDom, "ROOT", postRender

code above works with valueInitial = "75" but fails with valueInitial = "150" : the initial value gets truncated to 100

note

seems strangely related to https://github.com/ionic-team/ionic/issues/1948#issuecomment-52622819 although that's for a different framework; but maybe the same logic bug is hitting karax. [EDIT] this bug doesn't happen with normal html/js

timotheecour commented 5 years ago

workaround

when defined case2:
  include karax / prelude
  import karax / kdom

  let id = "foo1"
  let id2 = "foo2"
  let valueInitial = "150"
  var isInit = false
  proc updateText() =
    if not isInit:
      isInit = true
      document.getElementById($id).value = valueInitial
    document.getElementById(id2).childNodes[0].nodeValue=document.getElementById($id).value
  proc createDom(): VNode =
    result = buildHtml(tdiv):
      input(`type`="range", min = "10", max = "170", value = valueInitial, id = id):
        proc oninput(ev: Event; target: VNode) = updateText()
      tdiv(id=id2):
        text ""

  proc postRender() = updateText()

  setRenderer createDom, "ROOT", postRender
ajusa commented 3 years ago

Somewhat reduced example for anyone who wants to fix this and verify that it works:

include karax / prelude
proc createDom(): VNode =
  result = buildHtml(tdiv):
    input(`type`="range", min = "10", max = "170", value = "170")

setRenderer createDom

Expected output is that the slider is maxed out, actual is that the slider seems to be at 100 like @timotheecour mentioned.