CODEWITHSUNDEEP
javascriptreactjsreact-reduxmaterial-uiredux-form
Min
Min

Reputation: 528

Material UI autocomplete with redux-form values getting destroyed

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

Edit FORM VALUES

Upvotes: 4

Views: 2796

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281626

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;

Edit FORM VALUES

Upvotes: 8

DONofCON
DONofCON

Reputation: 1

It seems that youre correct, the value just isnt being displayed properly. If you are able to get the value from your redux form you can pass that value as an inputValue to the autocomplete. This will display the value in the text box. Make sure to use inputValue and not value.

 <Autocomplete
        inputValue={//this is where your redux form value should be displayed}
        autoSelect
        options={hobbies}
        autoHighlight
        getOptionLabel={option => option.title}
        onChange={(event, newValue) => console.log(newValue)}
        getOptionSelected={(option, value) => option.title === value.title}
        renderInput={params => (
          <TextField {...params} {...input} value="test" variant="outlined" fullWidth />
        )}
      />

Upvotes: 0

Related Questions