Material UI autocomplete with redux-form values getting destroyed

Question

I'm trying to use Material UI's autocomplete component with redux wizard form

I was able to link the autocomplete provided by material UI but when i go back to previous page and come back to the second page where the autocomplete fields are, the field gets destroyed despite having destroyOnUnmount set to false. (All other fields doesn't get destroyed but only the fields in page 2 which uses material UI autocomplete feature) Actually I dont think it's getting destroyed because the value is still there you just can't see it in the input

Also When I click Submit, the Main Hobby section's value gets through but the multiple hobby section's value doesnt get through. Can anyone have a look and see what's wrong? Thanks

Answer 1

You need to define the value attribute of AutoComplete to show the selected values when you visit the form again.

You must note that the two fields in Hobby form need to be defined with different name

Also the onChange value of multi select AutoComplete need to inform reduxForm about the change

MultipleComplete.js

import React from "react";
import { TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";
const hobbies = [
  { title: "WATCHING MOVIE" },
  { title: "SPORTS" },
  { title: "MUSIC" },
  { title: "DRAWING" }
];

const MultipleComplete = ({
  input,
  meta: { touched, error, submitFailed }
}) => {
  const { onChange, ...rest } = input;
  return (
    <div>
      <Autocomplete
        multiple
        limitTags={2}
        value={input.value || []}
        id="multiple-limit-tags"
        options={hobbies}
        onChange={(e, newValue) => {
          onChange(newValue);
        }}
        getOptionLabel={option => option.title}
        getOptionSelected={(option, value) => option.title === value.title}
        renderInput={params => (
          <TextField
            {...params}
            variant="outlined"
            placeholder="Choose Multiple Hobbies"
            fullWidth
          />
        )}
      />
    </div>
  );
};
export default MultipleComplete;

AutoHobbyComplete.js

import React from "react";
import { TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";
const hobbies = [
  { title: "WATCHING MOVIE" },
  { title: "SPORTS" },
  { title: "MUSIC" },
  { title: "DRAWING" }
];

const AutoHobbyComplete = ({
  input,
  meta: { touched, error, submitFailed }
}) => {
  const getSelectedOption = () => {
    return hobbies.find(o => o.title === input.value);
  };
  const { onChange, ...rest } = input;
  return (
    <div>
      <Autocomplete
        autoSelect
        value={getSelectedOption()}
        options={hobbies}
        autoHighlight
        getOptionLabel={option => option.title}
        onChange={(event, newValue) => onChange(newValue)}
        getOptionSelected={(option, value) => {
          return option.title === value.title || option.title === input.value;
        }}
        renderInput={params => {
          return (
            <TextField
              {...params}
              {...rest}
              value={input.value}
              variant="outlined"
              fullWidth
            />
          );
        }}
      />
    </div>
  );
};

export default AutoHobbyComplete;