van
van copied to clipboard
Abnormal behavior under the input box.
Using VanJS to create an input element with type number
below, setting its value to a state, and then updating the value of this state in the oninput event of the element. When the input value in the element is 1.x
, the cursor stays after x
. However, when the delete key is pressed at this point, under normal circumstances, the cursor should move from after x
to after .
, and then x
should be deleted. However, in the VanJS example below, after x
is deleted, the input's value becomes 1
, and the cursor moves in front of 1
. This is obviously incorrect. Is this related to how VanJS updates the DOM content?
import van from 'vanjs-core'
const { div, input } = van.tags
const App = () => {
const value = van.state('1.0')
return div(
input({
type: 'number', value, oninput(event: KeyboardEvent) {
value.val = (event.target as HTMLInputElement).value
}
})
)
}
van.add(document.body, App())
This is due to the behavior of number
-typed <input>
element. When you delete x
, event.target.value
equals 1
, not 1.
, as only numbers are allowed in the input box.
No, by x
I mean any arbitrary number, and the issue will still persist in this case.
Please watch the video demonstration below.
https://github.com/vanjs-org/van/assets/61752998/b7c5a0f8-52a2-44b5-a6b0-716c54a11b09
Yeah, I understand x
means a number
. My point is: event.target.value
equals 1
for the input event that is triggered when you delete the number after the decimal point. This is the behavior of the DOM element.