Adding icon to text field based on server side validation(Formik+Yup+Material UI)

Question

I am trying to show a tick or cross icon in a text field based on the api response.

My text field looks like this. I've added inputProps to it and added an adornment. But I want to display different icons based on a function which will return if its valid or not.

          <TextField
            error={errors.username && touched.username}
            variant="outlined"
            required
            fullWidth
            name="username"
            label="Username"
            onChange={handleChange}
            helperText={touched.username && errors.username}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end" disablePointerEvents="true">
                  <CheckCircleOutlineIcon
                    style={{ color: green[500] }}
                    fontSize="small"
                  ></CheckCircleOutlineIcon>
                </InputAdornment>
              ),
            }}
          />

But this keeps showing all the time, in the handleChange event i want to trigger a function which lets me decide on which icon i will show. I tried a lot of google search, but it dint help. I see this can be achieved easily in mdBootstrap like the image i have shown, but i am using material ui and yup for validations and formik. Please help!

Answer 1

Had the same issue:

My steps to fix it:

1. Made my Formik {Field} Module into the Material UI {Textfield} Module to be able to add the icons using the InputProps={}. This also required readding the {handleChange, handleBlur} props as validation didn't kick in on the fields otherwise.

2. I used endAdorment property to add the icons to the field and added conditions directly inside it to display the correct icon based on the Formik validation.

I haven't checked it with an API call validation, but I assume it works similarly with it.

<Field
            component={TextField}
            error={errors.username && touched.username && true}
            variant="outlined"
            required
            fullWidth
            name="username"
            label="Username"
            onChange={handleChange}
            onBlur={handleBlur}
            helperText={touched.username && errors.username}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end" disablePointerEvents="true">
                  {errors.username && touched.username && (
                    <CancelIcon
                      style={{ color: "red" }}
                      fontSize="default"
                    ></CancelIcon>
                  )}
                  {!errors.username && touched.username && (
                    <CheckCircleIcon
                      style={{ color: "#05cc30" }}
                      fontSize="default"
                    ></CheckCircleIcon>
                  )}                  
                </InputAdornment>
              ),
            }}
          />

I added conditions directly inside the endAdornment which checks for the errors.username as well as if it was touched and displays Cross or if touched and !errors.username it changes to green tick.