Arrows not working on input type=“number” that has onchange event handler (chrome browser only) #143

nhanb · 2020-04-16T12:55:56Z

Using nim devel, karax 1.1.2:

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

var v = 1

proc createDom(): VNode =
  buildHtml(tdiv):
    input(
      `type`="number",
      placeholder = $v,
      value = $v,
      onchange = proc (ev: Event, n: VNode) =
        v = parseInt($n.value)
    )
    tdiv: text "Value is " & $v

setRenderer createDom

Click on either arrow multiple times and it will stop working. Without the onchange block it works fine.

I'm almost certain that this is due to a bug(?) in chrome that happens when a mousemove event listener (on the document or the element itself) executes ev.preventDefault() : https://stackoverflow.com/questions/34282278/arrows-not-working-on-input-type-number.

I don't know how karax's internals work but is it reasonable to change it somehow to avoid this bug?

The text was updated successfully, but these errors were encountered:

geotre · 2021-05-05T20:35:11Z

Cannot replicate this issue on Karax 1.2.1, Nim 1.4.6 with Chrome or Firefox

ajusa · 2021-05-05T20:45:06Z

Hm, I left this issue open as I was able to reproduce some sort of unexpected behavior: When I click on the up arrow once, it increments, but then the down arrow becomes selected. Then when I continue clicking, even when my mouse is hovering over the top arrow, the bottom arrow keeps getting clicked. Only when I move my mouse does the top arrow become reselected.
(Chrome Version 87.0.4280.66 (Official Build) (64-bit), Karax 1.2.1 as well)

geotre · 2021-05-05T21:54:02Z

Seems like a Chrome bug, not sure if this can be handled in Karax. I have done some testing, manually editing the compiled JS but nothing I tried has worked. It's not due to preventDefault or the handler return as mentioned in the SO link

ajusa · 2021-05-05T22:32:41Z

Yeah, the SO link doesn't seem to directly apply here. I tried this:

<html>
  <body>
    <input type="number", value="0" onchange="change()">
  </body>
</html>

just in a normal HTML file and it doesn't show the same behavior, which makes me think that it should be fixable in Karax. This isn't some weird edge case either, listening to a number input using onchange is pretty common. But yes, I'm not sure what the fix (or even the root cause is, since it varies between browsers).

Interestingly, the following doesn't have the issue:

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

var v = 1

proc createDom(): VNode =
  buildHtml(tdiv):
    input(
      `type`="number",
      onchange = proc (ev: Event, n: VNode) =
        v = parseInt($n.value)
    )
    tdiv: text "Value is " & $v

setRenderer createDom

All I did was remove the placeholder/value attributes and it seems to work. My guess is that this causes Karax to never replace the element (as the attributes don't change), so this might actually be preventable within Karax itself.

ajusa added the bug label May 2, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Arrows not working on input type=“number” that has onchange event handler (chrome browser only) #143

Arrows not working on input type=“number” that has onchange event handler (chrome browser only) #143

nhanb commented Apr 16, 2020 •

edited

Loading

geotre commented May 5, 2021

ajusa commented May 5, 2021 •

edited

Loading

geotre commented May 5, 2021

ajusa commented May 5, 2021

Arrows not working on input type=“number” that has onchange event handler (chrome browser only) #143

Arrows not working on input type=“number” that has onchange event handler (chrome browser only) #143

Comments

nhanb commented Apr 16, 2020 • edited Loading

geotre commented May 5, 2021

ajusa commented May 5, 2021 • edited Loading

geotre commented May 5, 2021

ajusa commented May 5, 2021

nhanb commented Apr 16, 2020 •

edited

Loading

ajusa commented May 5, 2021 •

edited

Loading