21 lines · 770 B · TypeScript
RawDownload
"use client"; import { useCommitOnBlur } from "~/hooks/useCommitOnBlur";import { Input, type InputProps } from "./input"; export type DraftInputProps = Omit<InputProps, "value" | "onChange" | "defaultValue"> & {  readonly value: string;  readonly onCommit: (next: string) => void;}; /** * Text `<Input>` that buffers keystrokes locally and invokes `onCommit` * only when the user finishes editing (blur or Enter). Prevents each * keystroke from triggering a settings-wide re-render or a server RPC * round-trip, which otherwise makes fields backed by a server-hydrated * value feel laggy. */export function DraftInput({ value, onCommit, ...rest }: DraftInputProps) {  const bag = useCommitOnBlur(value, onCommit);  return <Input {...rest} {...bag} />;}