[Autocomplete] onNewRequest to return an object

[tahir-masood1]

Hi,
I am using Material UI Components and they are really helpful. I am using an array of objects as datasource for Autocomplete. When I raises an 'onNewRequest' event than it passes the text value rather the object user selects. Can you plz see this.

My DataSource:

  var airportsList=[];
  this.airports.forEach(function(airport){

  airportsList.push({
    text: airport.itineraryAirportName[0],
    key:airport.id[0],
    value: <MenuItem
        primaryText={airport.itineraryAirportName[0]}
        secondaryText={airport.id[0]}
        style={{fontFamily:'caslon, garamond, serif !important'}}
        leftIcon={<span style={{border: '1px solid grey'}}
            className={countryClass}></span>}
        innerDivStyle={{paddingLeft: '50px'}}

        />
    })
  });

My Component:

 PickupAirportChange(t) {
     RAFActions.PickupAirportChange(t);
  },
 UpdateDropAirport(t) {
  var selectedAirport = '';
  if (t.length > 0) {
  for (var i = 0; i < this.props.airports.length; i++) {
    if (this.props.airports[i].itineraryAirportName[0] == t) {
      selectedAirport = this.props.airports[i];
      break;
      }

    }
  }
  <div className="col m11 l11 form-input departure-airport mt-15">
              <AutoComplete
                  hintText="Search Airport"
                  onUpdateInput= {this.PickupAirportChange}
                  onNewRequest={this.UpdatePickupAirport}
                  maxSearchResults={10}
                  dataSource={this.props.airportList}
                  filter={this.props.fil}
                  triggerUpdateOnFocus={true}
                  menuProps={{maxHeight:200,width:'100%'}}
                  underlineStyle={{display:'none'}}>
              </AutoComplete>
            </div>

[markshust]

I believe this is intender per the documentation
http://www.material-ui.com/#/components/auto-complete

First callback param is chosenRequest, string. It would be nice if this was an event object instead. I need this to trigger an action on debounce, which only works by passing in the event object.

[novembrea]

That would be a nice feature. In my use case I have a table beneath an AutoComplete component and the selected result is pushed into the table. Currently I'm storing a copy of incoming dataSource in component's state and then extract selected object using index, which is passed in a callback as the second argument.
handleNewRequest = (value, index) => doStuffWithObject(this.state.cachedSource[index])
I'd gladly get rid of this hacky approach.

[smcguinness]

I'm experiencing this shortcoming as well. I came into it thinking it would function more like a native Select element (ex Select2).

[geoffreyabdallah]

I'm currently getting around this by Stringifying the object, passing that to text and then parsing to grab the fields I need in onNewRequest (hackey, but works for what I need right now). Example (don't get too hung up on the Ramda stuff - general idea is to stringify the object, then parse when you need to use the object in onNewRequest):

//DataSource
const generateDataSource = mapIndexed((company, i) => ({
  text: JSON.stringify(company),
  value: (
    <ListItem
      key={i}
      primaryText={company.companyName}
    />
  ),
}));

// AutoComplete
<AutoComplete
  hintText="Company Name"
  floatingLabelText="Company Name"
  filter={R.identity}
  searchText={props.companyName}
  dataSource={generateDataSource(props.typeAheadCompanies)}
  onUpdateInput={props.updateCompanyName}
  onNewRequest={R.compose(props.selectExistingCompany, R.pick(['companyName', 'companyId']), JSON.parse)}
 />

[oliviertassinari]

Closed by #4783