wp-optimize / vendor / team-updraft / lib-onboarding-wizard / Wizard / Onboarding / src / components / Fields / TextInput.tsx

TextInput.tsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 4.7.0, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Fields/TextInput.tsx

45 lines 1.5 KB

Raw Download Zip

1	import { forwardRef, InputHTMLAttributes, useState, useEffect } from "react";
2	import { twMerge } from "tailwind-merge";
3
4	interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
5	type?: string;
6	storedValue?: string;
7	}
8
9	const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
10	({ type = "text", className, value, defaultValue, onChange, ...props }, ref) => {
11	const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? "");
12
13	// Sync when `value` changes (controlled mode)
14	useEffect(() => {
15	if (value !== undefined) {
16	setInternalValue(value);
17	}
18	}, [value]);
19
20	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
21	const newVal = e.target.value;
22	setInternalValue(newVal);
23	onChange?.(e); // Pass event to parent (so Email, Password, etc. still work)
24	};
25
26	return (
27	<input
28	ref={ref}
29	type={type}
30	value={internalValue}
31	onChange={handleChange}
32	className={twMerge(
33	"w-full rounded-md border border-gray-400 p-2 focus:border-primary-dark focus:outline-none focus:ring disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-200",
34	className
35	)}
36	{...props}
37	/>
38	);
39	}
40	);
41
42	TextInput.displayName = "TextInput";
43
44	export default TextInput;
45