| 1 | "use client"; |
| 2 | |
| 3 | import { Input } from "@/components/ui/input"; |
| 4 | import { useEffect, useState } from "react"; |
| 5 | |
| 6 | export interface BlurInputProps extends Omit< |
| 7 | React.ComponentProps<typeof Input>, |
| 8 | "onChange" | "onBlur" |
| 9 | > { |
| 10 | value: string | number; |
| 11 | onChange: (value: string | number) => void; |
| 12 | } |
| 13 | |
| 14 | /** |
| 15 | * Input that only triggers onChange when the user blurs (leaves) the input. |
| 16 | * This reduces the number of updates compared to DebouncedInput. |
| 17 | */ |
| 18 | export function BlurInput({ |
| 19 | value: initialValue, |
| 20 | onChange, |
| 21 | ...props |
| 22 | }: BlurInputProps) { |
| 23 | const [value, setValue] = useState(initialValue); |
| 24 | |
| 25 | useEffect(() => { |
| 26 | setValue(initialValue); |
| 27 | }, [initialValue]); |
| 28 | |
| 29 | return ( |
| 30 | <Input |
| 31 | {...props} |
| 32 | value={value} |
| 33 | onChange={(e) => { |
| 34 | setValue(e.target.value); |
| 35 | }} |
| 36 | onBlur={() => { |
| 37 | if (value !== initialValue) { |
| 38 | onChange(value); |
| 39 | } |
| 40 | }} |
| 41 | onKeyDown={(e) => { |
| 42 | if (e.key === "Enter") { |
| 43 | e.currentTarget.blur(); |
| 44 | } |
| 45 | }} |
| 46 | /> |
| 47 | ); |
| 48 | } |
| 49 |