| 1 | "use client"; |
| 2 | |
| 3 | import { useCommitOnBlur } from "~/hooks/useCommitOnBlur"; |
| 4 | import { Input, type InputProps } from "./input"; |
| 5 | |
| 6 | export type DraftInputProps = Omit<InputProps, "value" | "onChange" | "defaultValue"> & { |
| 7 | readonly value: string; |
| 8 | readonly onCommit: (next: string) => void; |
| 9 | }; |
| 10 | |
| 11 | /** |
| 12 | * Text `<Input>` that buffers keystrokes locally and invokes `onCommit` |
| 13 | * only when the user finishes editing (blur or Enter). Prevents each |
| 14 | * keystroke from triggering a settings-wide re-render or a server RPC |
| 15 | * round-trip, which otherwise makes fields backed by a server-hydrated |
| 16 | * value feel laggy. |
| 17 | */ |
| 18 | export function DraftInput({ value, onCommit, ...rest }: DraftInputProps) { |
| 19 | const bag = useCommitOnBlur(value, onCommit); |
| 20 | return <Input {...rest} {...bag} />; |
| 21 | } |