[API Bug] Jumping Caret in Form.TextField and Form.TextArea

[lucaschultz]

Raycast version: Version 1.25.0

Description

When entering text in a controlled Form.TextField or Form.TextArea with the caret in any position but the last of the string, the caret jumps to the last position of the string.

Steps To Reproduce

1. Create a form with a Form.TextArea or Form.TextArea with their respective values bound to a variable using the useState hook like in the examples.
2. Try entering text anywhere but in the last caret position.

I also made small GIF to illustrate the issue

as well as a sample extension which you can find in this repo. Also, the bug is reproducible with both the controlled Form.TextField example and uncontrolled Form.TextArea example (which is probably mixed up and should be the controlled example) in your documentation. Also, here is the code of the sample extension (which is also shown in the GIF):

import { Form } from "@raycast/api";
import { useState } from "react";

export default function Command() {
  const [textAreaText, setTextAreaText] = useState<string>("Try typing something here →  ← between the arrows!");
  const [textFieldText, setTextFieldText] = useState<string>("Try typing something here →  ← between the arrows!");

  return (
    <Form onSubmit={(values) => console.log(values)}>
      <Form.TextArea id="textarea" title="Text Area" value={textAreaText} onChange={setTextAreaText} />
      <Form.TextField id="textfield" title="Text Field" value={textFieldText} onChange={setTextFieldText} />
    </Form>
  );
}

The current behavior

It is not possible to enter text anywhere but at the end of the string. Probably because the caret position gets reset everytime the value is updated.

The expected behavior

It should be possible to enter text anywhere in the Form.TextField or Form.TextArea.

[mattisssa]

Good catch! Thanks, we will fix it soon