ARTICLE AD BOX
I’m using OpenTUI (@opentui/react) and I have only one input field.
I want the input under “Username” to become focused and be able to type the input when I press the Tab key.
import { TextAttributes } from "@opentui/core"; import { createFileRoute } from "@tanstack/react-router"; import { useCallback, useState } from "react" import { createRoot, useKeyboard } from "@opentui/react" export const Route = createFileRoute("/")({ component: Home, }); function Home() { const [username, setUsername] = useState("") const [focused, setFocused] = useState<"username">("username") useKeyboard((key) => { if (key.name === "tab") { setFocused("username") } }) return ( <box > <text fg="#FFFF00">Insert Your Name </text> <box title="Username" style={{ border: true, width: 40, height: 3 }}> <input placeholder="Enter username..." onInput={setUsername} /> </box> </box> ); }