material-ui-formik-components icon indicating copy to clipboard operation
material-ui-formik-components copied to clipboard

The `getOptionLabel` method of Autocomplete returned undefined instead of a string for ""

Open TwoForTen opened this issue 4 years ago • 7 comments

After frustrating 2+ hours of trying to get Autocomplete to work, I literally copied the example code and it still doesn't work.

The error is in the title. How is this possible...

TwoForTen avatar May 12 '20 16:05 TwoForTen

<FastField name="country" options={[ { value: '', label: '-- No selection --' }, { value: 'Male', label: 'Male' }, { value: 'Female', label: 'Female' }, { value: 'Other', label: 'Other' }, ]} component={Autocomplete} textFieldProps={{ label: 'Država', variant: 'outlined', }} />

This is the autocomplete code, it is wrapped in a standard Formik form

TwoForTen avatar May 12 '20 16:05 TwoForTen

@TwoForTen thanks for pointing it out. I forgot to update the example in codesandbox. In initialValues, country was an empty string, while it should be null. See below:

Wrong:

initialValues={{
  username: "",
  gender: "Female",
  country: ""
}}

Correct:

initialValues={{
  username: "",
  gender: "Female",
  country: null
}}

You can always refer to the repo's example folder for the most accurate examples.

gerhat avatar May 12 '20 19:05 gerhat

Hey man, thank you very much for your response. That actually got rid of the error, and the form behaves properly.

Now the next problem I have is when submitting form I get an error from the backend that the input of the Country is not a string.

Do you know anything that might be wrong from the top of your head?

EDIT: Yeah it just seems the value is now null, and it seems like Formik is not updating the value.

EDIT 2: Okay it's not working only because I have the freeSolo attribute, otherwise picking an option is fine. Is there even support for freeSolo Autocomplete?

TwoForTen avatar May 12 '20 20:05 TwoForTen

Are your options in this format?

[
  {
    "label": "Label1",
    "value": "Val1"
  },
  {
    "label": "Label2",
    "value": "Val2"
  },
]

Edit: you just type a value? You're not selecting from the dropdown?

gerhat avatar May 12 '20 20:05 gerhat

Yes, the idea is that there are some options that the user can choose from, but if none match, he should be able to type in a custom value.

Judging by your answer, I reckon there's no support for it :(

TwoForTen avatar May 12 '20 20:05 TwoForTen

Correct, it's not supported yet. Do you want me to check it?

gerhat avatar May 12 '20 20:05 gerhat

Well I don't know how much of a hassle it is, but I will definitely try to hack my way through 😄

TwoForTen avatar May 12 '20 20:05 TwoForTen