It's difficult to articulate, but here is an image illustrating the issue: here the input stops
The developer tools are displaying:edge dev tools
I am using the Material UI Input component with React, and for some unknown reason, the text cursor halts halfway.
I suspect the issue lies within this code:
<Input sx={{ input: {color: "white"} }} color="primary" type="text" placeholder="name" onChange={(e) => setName(e.target.value)} value={name} />
Here is the entire component code:
import { useState } from "react";
import styles from "./name.module.css";
import Button from '@mui/material/Button';
import { Input } from "@mui/material";
const Name = ({ btnClick }) => {
const [name, setName] = useState("");
const [empty, setEmpty] = useState("");
const handleSubmit = () => {
setName("");
if (name === "") {
setEmpty("cannot be empty");
} else {
btnClick(name);
}
};
return (
<div className={styles.main}>
<h2>Enter a name</h2>
<Input sx={{ input: {color: "white"} }} color="primary" type="text" placeholder="name" onChange={(e) => setName(e.target.value)} value={name} />
<Button onClick={handleSubmit} variant="contained">submit</Button>
<h3 className={styles.empty}>{empty}</h3>
</div>
);
};
export default Name;
I attempted to troubleshoot using the dev tools by systematically disabling properties, but unfortunately, the issue persisted or I may have overlooked something.