Autocomplete component doesn't show options.

[eliranamar]

my goal is to show the labels of my data for selection, but keep the value in redux-form. So i have this dataSource for example:

const COUNTRIES_PAIRS = [
  {
    label: 'Israel',
    value: 'il',
  },
  {
    label: 'United States',
    value: 'us',
  },
  {
    label: 'Canada',
    value: 'ca',
  },
  {
    label: 'France',
    value: 'fr',
  },
  {
    label: 'Germany',
    value: 'de',
  },
  {
    label: 'Italy',
    value: 'it',
  },
]

which i send as prop to my AutoComplete component,

like this:

              <WizardAutoCompleteField
                label="Company headquarters"
                dataSource={COUNTRIES_PAIRS}
                name="country"
                required
              />

when i start typing something, like 'uni', no options are shows for selection. like the docs show, http://www.material-ui.com/#/components/auto-complete i pass a dataSourceConfig. i have tried both material-ui/AutoComplete' and 'redux-form-material-ui' fuzzyFilter,

here is my code:

import React from 'react';
import PropTypes from 'prop-types';
import { Field } from 'redux-form';
import { AutoComplete } from 'redux-form-material-ui';
import MUIAutoComplete from 'material-ui/AutoComplete';
import { required } from '../../../app/reduxFormFieldValidation';

export function WizardAutoCompleteField(props) {
  const { name, hintText, label, isRequired, dataSource } = props;

  // field required?
  const validator = isRequired ? [required] : [];

  const dataSourceConfig = {
    text:  'label',
    value: 'value',
  };

  return (
    <div>
      <Field
        component={AutoComplete}
        name={name}
        hintText={hintText}
        fullWidth
        label={label}
        filter={MUIAutoComplete.fuzzyFilter}
        dataSource={dataSource}
        validate={validator}
        dataSourceConfig={dataSourceConfig}
      />
    </div>
  );
}

WizardAutoCompleteField.propTypes = {
  name:       PropTypes.string.isRequired,
  dataSource: PropTypes.array.isRequired,
  hintText:   PropTypes.string,
  label:      PropTypes.string,
  isRequired: PropTypes.bool,
};

WizardAutoCompleteField.defaultProps = {
  hintText:   '',
  label:      '',
  isRequired: false,
};

[mihirsoni]

@eliranamar Could you take a look at example code , we have example with AutoComplete component .

http://erikras.github.io/redux-form-material-ui/ Make sure you're using right MUI and redux-form-material-ui version.

Auto complete has been deprecated with MUI 1.0.

Feel free to re-open if issue still persist.

[eliranamar]

i did it like the example, when the dataSource is an array of strings, it works ok, but when its an array of objects, it doesnt show options,

when i use the the MUI autocomplete with array of objects with config, it works, but within redux-form Field component, it doesnt. can you please re open the issue?

<MUIAutoComplete
        filter={MUIAutoComplete.fuzzyFilter}
        dataSource={dataSource}
        dataSourceConfig={dataSourceConfig}
/>

[mihirsoni]

@eliranamar Sure. Could you see are these props are getting passed over till Auto Complete ?

[eliranamar]

yes, weirldy the dataSourceConfig is the default one, and not the one i pass,

you can see the dataSourceConfig prop here : https://imgur.com/w4WFVGH

my dataSourceConfig is not passed for some reason, my code:

  return (
    <div>
      <Field
        component={AutoComplete}
        name={name}
        hintText={hintText}
        fullWidth
        label={label}
        filter={MUIAutoComplete.fuzzyFilter}
        dataSource={dataSource}
        validate={validator}
        dataSourceConfig={{ text: 'label', value: 'value' }}
      />
    </div>
  );
}

my packages are :

"redux-form": "6.6.3",
"redux-form-material-ui": "4.1.3",