van icon indicating copy to clipboard operation
van copied to clipboard

Abnormal behavior under the input box.

Open iuroc opened this issue 1 year ago • 4 comments

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

iuroc avatar Jan 13 '24 18:01 iuroc

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.

Tao-VanJS avatar Jan 14 '24 00:01 Tao-VanJS

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

iuroc avatar Jan 14 '24 06:01 iuroc

Please watch the video demonstration below.

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

iuroc avatar Jan 14 '24 06:01 iuroc

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.

Tao-VanJS avatar Jan 15 '24 02:01 Tao-VanJS