JSON input jumps to bottom

[dantownsend]

If you click into a JSON input, and press return, the cursor jumps to the bottom of the textarea.

https://github.com/piccolo-orm/piccolo_admin/assets/350976/720595f0-e9be-42f5-996f-3436ba8a8be2

The reason it happens is this line:

https://github.com/piccolo-orm/piccolo_admin/blob/f6252b430104b3b78f001ad407f290dcc422c606/admin_ui/src/components/InputField.vue#L103

We try and be helpful by auto-expanding the textarea as the content gets larger. It's a nice feature, but the side effect of this is it's moving the cursor to the bottom.

The solution is basically something like this:

setTextareaHeight() {
    let element = this.$refs.textarea
    if (element) {
        if (element.scrollHeight > element.clientHeight) {
            const cursorPosition = element.selectionStart
            this.textareaHeight = element.scrollHeight + "px"
            window.setTimeout(
                () => {element.setSelectionRange(cursorPosition, cursorPosition)},
                0
            )
        }
    }
}