CODEWITHSUNDEEP
reactjsmaterial-uiformikformik-material-ui
darkvodka
darkvodka

Reputation: 333

How to display initialValues for material-ui autocomplete field?

I use the autocomplete field of material-ui (v5) and formik to generate my forms. On this form, I have some lists defined as constants.

I use an api to get the default value of this list. This api returns only the "code" of the option but not its label.

<Formik
        enableReinitialize
        initialValues={initialFormValues}
        validationSchema={Yup.object().shape({
[...]
<Autocomplete
  error={Boolean(touched.civility && errors.civility)}
  helperText={touched.civility && errors.civility}
  label="Civility"
  margin="normal"
  name="civility"
  onBlur={handleBlur}
  onChange={(e, value) => setFieldValue('civility', value)}
  options={civilities}
  value={values.civility}
  getOptionLabel={(option) =>
    option.name ? option.name : ''
  }
  isOptionEqualToValue={(option, value) => option.code === value}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="outlined"
      label={<Trans>Civility</Trans>}
    />
  )}
/>

My parameter isOptionEqualToValue is good because even if the value is not displayed in the input, it is well selected in the list.

You can see that the input text field is empty:

field empty

But if I unroll the list, I can see that my "ms" value has been selected:

List ok

What should I do to make the input text contain the default value?

Upvotes: 6

Views: 16004

Answers (1)

Abdelrhman Arnos
Abdelrhman Arnos

Reputation: 1442

After cloned your snippet code above, the problem was in getOptionLabel, the option argument is a string value, so it hasn't a name property and appears empty string. Here is an online example codesandbox.

import { useState } from "react";
import { Formik, Form } from "formik";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";

export default function App() {
  const civilities = ["Mr", "Ms", "Other"];
  const [values, setValues] = useState({
    civility: "Ms"
  });

  const handleBlur = (e) => {
    console.log("Blur:", e.target.value);
  };

  const setFieldValue = (type, value) => {
    setValues((oldValues) => ({ ...oldValues, [type]: value }));
  };

  return (
    <Formik err>
      {({ errors, touched }) => (
        <Form>
          <Autocomplete
            error={Boolean(touched.civility && errors.civility)}
            helperText={touched.civility && errors.civility}
            label="Civility"
            margin="normal"
            name="civility"
            onBlur={handleBlur}
            onChange={(e, value) => setFieldValue("civility", value)}
            options={civilities}
            value={values.civility}
            isOptionEqualToValue={(option, value) => option.code === value}
            renderInput={(params) => (
              <TextField {...params} variant="outlined" label="Civility" />
            )}
          />
        </Form>
      )}
    </Formik>
  );
}

Upvotes: 4

Related Questions