vanjs-org / van

🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour.
https://vanjs.org
MIT License
3.77k stars 87 forks source link

Abnormal behavior under the input box. #237

Open iuroc opened 7 months ago

iuroc commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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

iuroc commented 7 months ago

Please watch the video demonstration below.

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

Tao-VanJS commented 7 months ago

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.