Abnormal behavior under the input box.

[iuroc]

trafficstars

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())

[Tao-VanJS]

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.

[iuroc]

No, by x I mean any arbitrary number, and the issue will still persist in this case.

[iuroc]

Please watch the video demonstration below.

https://github.com/vanjs-org/van/assets/61752998/b7c5a0f8-52a2-44b5-a6b0-716c54a11b09

[Tao-VanJS]

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.