Saved data breaks material ui text fields


hey so im new to both react and material ui and im having an issue where my text fields work fine but if the user has saved data to autofill the field it breaks the styling on it. I have included the code from the component below. I apologize if this is a dumb question but i googled it and didnt find anything helpful.

import React, {useState} from 'react';
import { Grid, Button, TextField, CardContent } from '@mui/material';
import Box from '@mui/material/Box';
import Auth from '../utils/auth';
import { useMutation } from '@apollo/client';
import { LOGIN_USER } from '../utils/mutations';
import FormControl from '@mui/material/FormControl';

const LoginForm = () => {
    const [userFormData, setUserFormData] = useState({ email: '', password: '' });
    const [validated] = useState(false);
    const [showAlert, setShowAlert] = useState(false);
    const [login] =useMutation(LOGIN_USER);
  
    const handleInputChange = (event) => {
      const { name, value } = event.target;
      setUserFormData({ ...userFormData, [name]: value });

    };
    const handleFormSubmit = async (event) => {
        event.preventDefault();
    
        const form = event.currentTarget;
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
    
        try {
          const data= await login({
            variables: {...userFormData}
          });
          console.log(data);
          Auth.login(data.data.login.token);
        } catch (err) {
          console.error(err);
          setShowAlert(true);
        }
        setUserFormData({
            username: '',
            email: '',
            password: '',
          });
        };
    return (
        <Box style={{ maxWidth: 650, margin: "0 auto", padding: "20px 5px" }}>
            <CardContent sx={{fontFamily: "gotham"}}>
                <form noValidate validated={validated} onSubmit={handleFormSubmit}>
                    <Grid container spacing={1}>
                        <Grid xs={12} item>
                            <TextField
                                required
                                error
                                id="outlined-error-helper-text"
                                label="Email Address"
                                fullWidth
                                color="error"
                                focused
                                style={{marginBottom:"10px"}}
                                onChange={handleInputChange}
                                value={userFormData.email}
                                text="email"
                                name="email"
                            />
                        </Grid>
                        <Grid xs={12} item>
                            <TextField
                                required
                                error
                                type="password"
                                id="outlined-error-helper-text"
                                label="Password"
                                fullWidth
                                color="error"
                                focused
                                style={{marginBottom:"10px"}}
                                onChange={handleInputChange}
                                value={userFormData.password}
                                text="password"
                                name="password"
                                />
                        </Grid>
                        <Grid sx={{ mt: 0.25 }} xs={12} item >
                            <Button type="submit"
                            color="secondary"
                            variant="outlined" 
                            fullWidth
                            style={{ border: '2px solid', marginBottom:"15px", fontSize:"22px"}}
                            disabled={!(userFormData.email && userFormData.password)}>
                                Login
                            </Button>
                        </Grid>
                    </Grid>
                </form>
            </CardContent>
        </Box>
    )
}

export default LoginForm;

broken text field

working text field

Source: JavaSript – Stack Overflow

November 21, 2021
Category : News
Tags: forms | input | javascript | material-ui | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.