Cannot use with Material UI's Autocomplete

[CharlieIGG]

The Problem

If I use Material UI's Autocomplete inside a Control's component prop, the viewValue doesn't map to the models value.

Steps to Reproduce

import AutoComplete from 'material-ui/AutoComplete';
const YearField = (props) => <AutoComplete 
   dataSource={["2005", "2006", "2007"]} 
   name="year"
   floatingLabelText="Year"
/>
...
<Form model="car">
   <Control.text 
      component={YearField} 
      model="car.year" 
      id="car.year" 
      model="car.year" 
      />
     <button type="submit">
       Continue!
     </button>
</Form>

If you write here, the car model will always be empty, whereas this works perfectly if I use the TextField from the same library. There seems to be no help over there.

Expected Behavior

When I write or select a year inside the Control the model should populate it's year attr with that value

Actual Behavior

Model is not updated whatsoever, and no action is dispatched upon writing

EDIT:

This appears to be because AutoComplete doesn't seem to directly expose a value prop?
I'm unsure what to do here.

[davidkpiano]

Right, you have to map value to searchText (or whatever the correct prop is) in mapProps. Please see the documentation on Custom Controls for more info: http://davidkpiano.github.io/react-redux-form/docs/guides/custom-controls.html

[CharlieIGG]

Right @davidkpiano I did take a look at the docs, but I can't seem to understand them right. I've tried:

mapProps={{
    searchText: (props) => props.modelValue,
}} 

and

mapProps={{
    searchText: (props) => props.viewValue,
}} 

and

mapProps={{
    searchText: (props) => props.value,
}} 

And all these with value and searchTexton the opposite side...

I can't seem to understand this mapping....

[davidkpiano]

Okay, the value mapping is correct, but maybe the issue is in how the value changes. Does Autocomplete have an onChange, or is it called something else? ;-)

[CharlieIGG]

Thanks @davidkpiano, indeed Autocomplete only seems to have a onUpdateInput method, but if I do this

mapProps={{
   searchText: (props) => props.modelValue,
   onUpdateInput: (props) => props.onChange,
}}

I still cannot update the model's value, nor trigger events on change. :$

[CharlieIGG]

Found the problem! I forgot to add {...props} when building my YearField component...