karax
karax copied to clipboard
karaxnim
Arrows not working on input type=“number” that has onchange event handler (chrome browser only)
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?
Cannot replicate this issue on Karax 1.2.1, Nim 1.4.6 with Chrome or Firefox
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)
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
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.