Bug: Cursor jumps to the end of input after value refresh

I’ve ran into this issue when was trying to implement date input, in which you can adjust date by using arrow up and arrow down keys. When cursor is on month I need to add or subtract one by pressing up and down keys. When cursor is on day, same thing with days. Listed below code should work in theory, but doesn’t behave as expected.

React version: 17.0.0

Steps To Reproduce

1. Create controlled input
2. Create key press handler, which changes value of input.

Code example:

export function DatePickerTest() {
    const [timestamp, setTimestamp] = useState(1609459200000)
    const date = new Date(timestamp)
    const value = date.getDate() + ""
    const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
        switch (event.code) {
            case UP_ARROW_KEY.code:
                setTimestamp(prev => prev + 24 * 60 * 60 * 1000)
                event.preventDefault() // to prevent default action of moving cursor to start of input
                break
            case DOWN_ARROW_KEY.code:
                setTimestamp(prev => prev - 24 * 60 * 60 * 1000)
                event.preventDefault() // to prevent default action of moving cursor to end of input
                break
        }
    }
    return el("input", {
        value: value,
        onKeyDown: onKeyDown,
    })
}

The current behavior

When value changes cursor jumps to last position

The expected behavior

Value update should preserve cursor position

[vkurchatkin]

It’s hard to tell without seeing how you use this hook, but generally you need to use useLayoutEffect to avoid such issues

[IlyaHalsky]

Here is a gif of what’s happening, with 30 frps, you can’t always see it 😦