AutoComplete dataSourceConfig for object array. about redux-form-material-ui HOT 17 CLOSED

I believe searchText is simply a prop to hold the value that has been typed in and is only used to return the results that match from the array (dataSource)?

I am about to attempt to set the value of an autocomplete on my edit screen so i'll come back with my results. :)

Ok results are in..... I gave up and switched to a SelectField. :) The project was starting to slip so AutoComplete is on hold for now. :)

from redux-form-material-ui.

What do you mean that it "appears that it is not supported"? Have you tried it? What happens?

from redux-form-material-ui.

Hi. Yes I've tried and get the following error:

Failed prop type: Invalid prop searchText of type object supplied to AutoComplete, expected string.

from redux-form-material-ui.

What that sounds like is that it is using your datasource, which is an array of objects, and then it's calling onChange to initialize itself to the first one, but that makes the value in Redux Form be an object: { code: 'USD', description: 'United States Dollar' }, and the value is what is passed to searchText by redux-form-material-ui, but then Material UI is complaining because it wants a string.

The API docs for AutoComplete state that the onNewRequest, which is what this library is using to listen for changes:

function(chosenRequest: string, index: number) => void

chosenRequest: Either the TextField input value, if enter is pressed in the TextField, or the text value of the corresponding list item that was selected.
index: The index in dataSource of the list item selected, or -1 if enter is pressed in the TextField.

And yet it is clearly passing an object as chosenRequest, not a string.

My conclusion is that using AutoComplete with objects rather than just strings as your dataSource is simply not compatible with Redux Form, or any state management library that listens to changes and passes the exact same value it receives from a change back as the value to render. What a bizarre API. If I were you, I would raise the issue with the Material UI project.

from redux-form-material-ui.

@itaylorweb
I added the AutoComplete input to this library.

I have the key/value data and dataSourceConfig working with [email protected].
I tried upgrading to 6.0.0-rc.4 (peer dependency for [email protected]) and the key/value no longer works.

When redux-form 6 (non RC) releases I'll have a look at getting it working again.
I need it for a work project so I have a good incentive to get it working again.

For now I'm sticking with my own fork of redux-form-material-ui (https://github.com/ONEOKI/redux-form-material-ui/tree/prebuilt) and [email protected].

from redux-form-material-ui.

Great news @Brian-Gaffney . For the minute I'm using my own renderer for the AutoComplete:
<MUIAutoComplete filter={MUIAutoComplete.fuzzyFilter} openOnFocus={true} maxSearchResults={5} dataSource={currencies} dataSourceConfig={currenciesConfig} floatingLabelText="Currency" fullWidth={true} {...field.input} onNewRequest={value => field.input.onChange(value.code)} errorText={field.touched && field.error && field.error} />

and redux-form-material-ui for all other components. Will look forward to future release.

Thanks.

from redux-form-material-ui.

Okay, so it sounds like this might actually be a problem with this library. Thanks for that follow-up, guys.

If I'm reading your code correctly, @itaylorweb, it looks like you are not providing a searchText prop. Is that true? Perhaps the rule is that if dataSourceConfig is passed, searchText should not be?

from redux-form-material-ui.

@erikras Im not passing a searchText prop.

Here is my field:

<Field name="currency" component={renderAutoComplete} />

and my render:

// Render MUI AutoComplete

const renderAutoComplete = (field) => {
  return (
    <MUIAutoComplete
    filter={MUIAutoComplete.fuzzyFilter}
    openOnFocus={true}
    maxSearchResults={5}
    dataSource={currencies}
    dataSourceConfig={currenciesConfig}
    floatingLabelText="Currency"
    fullWidth={true}
    {...field.input}
    onNewRequest={value => field.input.onChange(value.code)}
    errorText={field.touched && field.error && field.error} />
  );
}

from redux-form-material-ui.

Right. That's my point. redux-form-material-ui is passing the searchText prop, so maybe that is the problem.

What confuses me, though, is how you could initialize the value to anything. How do you set the value of an AutoComplete? I was under the impression that it was with the searchText prop.

from redux-form-material-ui.

Oh, is it with value? (which is hidden inside your ...field.input) Like how the errorText was not in the docs, but it gets passed along to the TextField inside of AutoComplete?

from redux-form-material-ui.

@itaylorweb I've been having problems getting searchText and dataSource to work too, fixed it with a modification but might be unique for my case?

export default createComponent(
  AutoComplete,
  ({ input: { onChange, value, ...inputProps }, searchText, ...props }) => ({
    ...mapError(props),
    ...inputProps,
    searchText,
    onNewRequest: (selectedItem, index) => {
        value = selectedItem.text;
        return onChange(selectedItem.value)
    }
  }))

from redux-form-material-ui.

Are there any updates with this, we are banging our heads to try to use autocomplete with keys and values but can't find a clear solution.
We added normalizers, but then we lose the code.

from redux-form-material-ui.

One extremely nasty solution we came up with is to reimplement the toString method, that way, the store stores the right thing and the representation in the input value is the right one (the object containing key and text), maybe the framework could do something similar by providing a render callback.

from redux-form-material-ui.

Building off of @itaylorweb's answer, I use this as a renderer and pass in all the props I require, such as dataSource, dataSourceConfig, name, etc at the <Field /> level.

const AutoComplete = ({ input, meta: { touched, error }, dataSourceConfig, ...rest }) => (
  <MUIAutoComplete 
    {...input}
    {...rest}
    dataSourceConfig={dataSourceConfig}
    onNewRequest={value => input.onChange(value[dataSourceConfig.value])} 
    errorText={touched && error} 
  />
);

The only drawback is that I have to always give it the dataSourceConfig, even if it is the default value.

from redux-form-material-ui.

I can't get my AutoComplete to work ... I did a custom component:

import React from 'react';
import AutoComplete from 'material-ui/AutoComplete'

export default class CustomAutoComplete extends React.Component {
  filterAutoComplete(searchText, key) {
    if (searchText.length >= 3) {
      return AutoComplete.caseInsensitiveFilter(searchText, key);
    }
    if (searchText.length == 0) {
      return true;
    }
    return false;
  }

  render() {
    const dataSourceConfig = { value: 'code', text: 'name' };

    const { dataSource, label, style, listStyle, input, touched, error } = this.props;
    return (
      <AutoComplete
        filter={ this.filterAutoComplete }
        openOnFocus={true}
        style={ style }
        listStyle={ listStyle }
        dataSource={ dataSource }
        dataSourceConfig={ dataSourceConfig }
        floatingLabelText={ label }
        { ...input }
        onBlur={ () => {} }
        onNewRequest={ value => { input.onChange(typeof value === 'object' ? value[dataSourceConfig.value] : value) } }
        errorText={ touched && error } />
    );
  }
}

Basically the behaviour I wanted was: when nothing is written, open the list with all the values, and when more than 3 characters are typed, search in the component. This works.

And I call it in my Redux Form component like this:

<Field name="roomType" component={ props =>
	  <CustomAutoComplete
	  {...props}
	  style={ autocompleteStyle }
	  listStyle={ autocompleteListStyle }
	  dataSource={ this.props.roomTypes }
	  label={ <FormattedMessage id={ 'rooms.roomType' } defaultMessage={ 'Tipo de habitación' } /> } />} />

The problem I have is that the value is displayed in the component only the second time I select a value (even if Redux-Form had the value set the first time correctly). Once the value is set correctly in one of the autocompletes, the other one works at first try.

What am I doing wrong here?

Note: I have two autocomplete components in this form.

redux-form: 6.2.1,
redux-form-material-ui: 4.1.2
material-ui: 0.16.4

from redux-form-material-ui.

Getting this warning when selecting a value for the first time
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the AutoComplete component.
@ghirlekar following your code snippet.
And hence the value doesnt get visible at the first time

from redux-form-material-ui.

Closing this for now. Feel free to re-open if issues still persist.

AutoComplete has been removed from MUI V1.

from redux-form-material-ui.