Autocomplete Set Default Value in React

Question

I need to have a default value in my autocomplete in my react app. My problem is when i try to submit it, it still is invalid. Meaning it has no value in it. I need to click the autocomplete and select it again just to make to have the value.

Pls check this codesandbox link CLICK HERE

          <Autocomplete
            name="member_status"
            value={values.member_status}
            options={memberStatuses ? memberStatuses : []}
            getOptionLabel={(memberStatus) => memberStatus.name}
            onChange={(e, value) => {
              setFieldValue(
                "member_status",
                value !== null ? value.id : ""
              );
            }}
            renderInput={(params) => (
              <TextField
                {...params}
                label="Member Status"
                name="member_status"
                variant="outlined"
                onBlur={handleBlur}
                helperText={
                  touched.member_status ? errors.member_status : ""
                }
                error={
                  touched.member_status && Boolean(errors.member_status)
                }
              />
            )}
          />

Check [this](https://codesandbox.io/s/autocomplete-formik-material-ui-react-forked-y0suq?file=/src/index.js) out. — bertdida, Aug 19 '20 at 14:41
@bertdida. Thanks, by the way, where do you put the `name="member_status"`, `values={values.member_status}`, in the AutoComplete or the TextField part. — Joseph, Aug 20 '20 at 03:02
`name="member_status"` should be on the `TextField`, `value` prop should be on `AutoComplete`. — bertdida, Aug 20 '20 at 03:19

score 0 · Accepted Answer · answered Aug 20 '20 at 03:50

0

The issue here is you are setting the initial value of your Autocomplete as an object, then you're validating for a string.

Changing your validationSchema to

const validationSchema = yup.object().shape({
  member_status: yup
    .object()
    .shape({
      id: yup.number(),
      name: yup.string()
    })
    .nullable()
    .required("Select member status")
});

and your Autocomplete's onChange handler to

...
onChange={(e, value) => {
  setFieldValue("member_status", value); // set the new value to an object, not string
}}

should work.

answered Aug 20 '20 at 03:50

bertdida

4,988
2
16
22

Thank you. Why is there `nullable()` in `.nullable() .required("Select member status")`? – Joseph Aug 20 '20 at 09:17
That's for when user click the `x` button on our form. – bertdida Aug 20 '20 at 09:21
But there's a `required` after it. – Joseph Aug 20 '20 at 09:22
1

I set `nullable` to avoid this message from __yup - member_status must be a object type, but the final value was: null. If "null" is intended as an empty value be sure to mark the schema as .nullable()__. And when the `value` is `null` it would fallback to `required` validator. – bertdida Aug 20 '20 at 09:26
Oh yeah. How can you remove that kind of error? I need it to be required also. and should be nullable. Thanks – Joseph Aug 20 '20 at 09:29
You need it to be `required` but `nullable`? Please elaborate. – bertdida Aug 20 '20 at 09:31
It just needs to be required. – Joseph Aug 20 '20 at 09:31
I'm not sure if we can remove the `null` erro message without using `nullable`. – bertdida Aug 20 '20 at 09:36
Ok. no problem. Thanks – Joseph Aug 20 '20 at 09:40

Autocomplete Set Default Value in React

1 Answers1