My issue is that when I interact with the text field, the label "Type your New Task here" moves up and gets covered by what looks like a white overlay. How can I fix this so that the label stays visible at all times?
Prior to engagement: https://i.stack.imgur.com/UsQwz.png
During engagement: https://i.stack.imgur.com/Ed322.png
I implemented the following code using material UI for styling:
<DialogTitle>Add New Task</DialogTitle>
<DialogContent>
<TextField
autoFocus
label={isEmpty ? "Task can't be empty" : "Type your New Task here"}
fullWidth
variant="outlined"
value={todoName}
inputRef={todoInput}
onChange={(e) => {
setTodoName(e.target.value.toLowerCase());
setIsEmpty(false);
}}
InputProps={{
style: { color: isEmpty ? warningColor : "initial" },
}}
InputLabelProps={{
style: { color: isEmpty ? warningColor : "initial" },
}}
error={isEmpty}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button
onClick={addTodo}
color="primary"
disabled={isEmpty || isLoading}
>
Add
</Button>
</DialogActions>
</Dialog>
I would appreciate any assistance on resolving this issue. Thank you.