As I input anything in the textinput field it immediately loses the focus and I have to click again in the textinput to type into it. Modal used is From flowbite-react.
const [formData, setFormData] = useState({
name: " ",
email: " ",
password: " "
})
const { name, email, password } = formData;
const handleChangeInput = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
return (
<div>
<Modal
show={showModal}
size="md"
popup={true}
onClose={toggleModal}
>
<Modal.Header />
<Modal.Body>
<form className="space-y-6" action="#">
<div className="space-y-6 px-6 pb-4 sm:pb-6 lg:px-8 xl:pb-8">
<h3 className="text-xl font-medium text-gray-900 dark:text-white">
{issignIn ? 'Sign in' : 'Sign up'} to our platform
</h3>
{!issignIn && (
<div>
<div className="mb-2 block">
<Label
htmlFor="name"
value="Your Name"
/>
</div>
<TextInput
name="name"
placeholder="John Cena"
id="name" key="name"
value={name}
onChange={handleChangeInput}
required={true}
/>
</div>
)}
<div>
<div className="mb-2 block">
<Label
htmlFor="email"
value="Your email"
/>
</div>
<TextInput
name="email"
id="email" placeholder="name@company.com"
key="email"
value={email}
onChange={handleChangeInput}
required={true}
/>
</div>
<div>
<div className="mb-2 block">
<Label
htmlFor="password"
value="Your password"
/>
</div>
<TextInput
name="password" id="password" placeholder="••••••••"
value={password}
onChange={handleChangeInput}
required={true} key="password"
/>
</div>
<div className="flex justify-between">
<div className="flex items-center gap-2">
<Checkbox id="remember" />
<Label htmlFor="remember">
Remember me
</Label>
</div>
<a
href="/modal"
className="text-sm text-blue-700 hover:underline dark:text-blue-500"
>
Lost Password?
</a>
</div>
<div className="w-full">
<Button type="submit" onClick={handleSubmit}>
{issignIn ? isFormSubmitted ? 'Logged In ' : loading ? 'Logging...' : 'Login to your account' : isFormSubmitted ? 'Signed Up ' : loading ? 'Creating Account...' : 'Create Account'}
</Button>
</div>
<div className="text-sm font-medium text-gray-500 dark:text-gray-300">
{issignIn ? (<p>Not registered? <a onClick={signUp} className="text-blue-700 hover:underline dark:text-blue-500">Create account</a></p>) : (<p>Already have a account? <a onClick={login} className="text-blue-700 hover:underline dark:text-blue-500">Login</a></p>)}
{/* <a
href="/modal"
className="text-blue-700 hover:underline dark:text-blue-500"
>
Create account
</a> */}
</div>
</div>
</form>
</Modal.Body>
</Modal>
</div>
)
As I remove the value and onchange attribute from the textinput the field starts working but then I'm not able to get the values inside the fields.
How can I get the values inside the textfield after typing without losing the focus?
