feat: enhance FloatingLabelInput to manage selected value for select type

This commit is contained in:
Orace.A 2025-03-28 19:07:21 +01:00
parent 01e27dff66
commit 75f8a526de

View File

@ -17,9 +17,15 @@ export default function FloatingLabelInput({
onChange, onChange,
}: FloatingLabelInputProps) { }: FloatingLabelInputProps) {
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [selectedValue, setSelectedValue] = useState(defaultValue || '');
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
const value = e.target.value; const value = e.target.value;
if (type === 'select') {
setSelectedValue(value);
}
if (onChange) { if (onChange) {
onChange(value); onChange(value);
} }
@ -34,7 +40,8 @@ export default function FloatingLabelInput({
<select <select
className="input-form focus:ring-2 focus:ring-blue-500 outline-none" className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
name={name} name={name}
value={defaultValue} value={selectedValue}
onChange={handleChange}
> >
{options?.map((option, index) => ( {options?.map((option, index) => (
<option key={index} value={option.value}>{option.label}</option> <option key={index} value={option.value}>{option.label}</option>