gerhat / material-ui-formik-components

Formik ready material ui components
MIT License
85 stars 13 forks source link

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

Open TwoForTen opened 4 years ago

TwoForTen commented 4 years ago

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 commented 4 years ago

<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

gerhat commented 4 years ago

@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.

TwoForTen commented 4 years ago

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?

gerhat commented 4 years ago

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?

TwoForTen commented 4 years ago

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 :(

gerhat commented 4 years ago

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

TwoForTen commented 4 years ago

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