-
Notifications
You must be signed in to change notification settings - Fork 5.6k
Description
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
- Create a form with a
Form.TextAreaorForm.TextAreawith their respective values bound to a variable using theuseStatehook like in the examples. - 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.
