Redux-form-material-ui: Autocomplete cause that you cannot use newest version of Material-ui

[EduardoAC]

The code need to be refactor to support the newest version of Material-ui since Autocomplete is not supported anymore.

[ratonjuancarlos]

Hi @EduardoAC,
you can create a Wrapper. you can find more information here:
Material UI Example.
In any case, here is what I did:

• [ ] Create an Autocomplete component, copying the one that is in the Material-UI new documentation: autocomplete

• [ ] then, create a Wrapper, that connects the redux-store, with your Autocomplete component, trough the Field component:

import AutoComplete from "./YourOwnAutoComplete";

...


const renderAutoComplete = ({
  input,
  name,
  label,
  meta: { touched, error },
  children,
  classes,
  theme,
  mySuggestions,
  myIsDisabled,
  myPlaceholder,
  myNoOptionsMessage,
  ...custom
}) => {
  return (
    <AutoComplete
      isDisabled={myIsDisabled}
      onChange={event => input.onChange(input.name, event)}
      noOptionsMessage={myNoOptionsMessage}
      placeholder={myPlaceholder}
      suggestions={mySuggestions}
      value={JSON.parse(input.value)}
    />
  );
};

• [ ] Now, use the redux-form Field component, with your new renderAutocomplete:

import { Field } from "redux-form";

...


<Field
    name="idPrograma"
    component={renderAutoComplete}
    floatingLabelText="Programa"
    suggestions={dataSource3}
    isDisabled={false}
    placeholder="Programa"
    noOptionsMessage={() => "No hay programas"}
    onChange={changeFieldValue}
    value={selectedPrograma}
    input={{
        name: "idPrograma",
        onChange: changeFieldValue,
        value: JSON.stringify(selectedPrograma)
    }}
 />

[EduardoAC]

@ratonjuancarlos Thanks for sharing, I did a similar implementation using react-select and material-ui components.

However, the problem comes from the import of this library since I cannot benefit from TextField or other components because it does break when I install in my codebase.

Therefore, if there are more people experience this problem, I am happy to create a PR that remove Autocomplete from the repository in order to be able to use with the latest version of material-ui

[taschetto]

@EduardoAC I have the same issue.

[ninjasun]

@EduardoAC same problem here.
the whole package is useless because autocomplete breaks the import.

[vilepickle]

Having the same problem.

[andreapier]

This package is for material-ui v0.X.
If you are on @material-ui v1+ you need to use this beta version.

[EduardoAC]

@andreapier thanks for the information, I will close the ticket since there is a beta in progress that solve the issue