Material UI AutoComplete not rendering on remote dataSource in React application

Question

I am using React 15.0.1 and Material-UI 0.15.0. I am trying to render an autocomplete through React. Here's my code:

import React from 'react';

import SomeService from '../../../services/SomeService';

import AutoComplete from 'material-ui/AutoComplete';

class SearchInput extends React.Component {
  constructor (props) {
    super(props);
    
    this.state = {
      dataSource: []
    };
  }
  
  searchSomething (value) {
    if (value.length) {
      SomeService.fetchAutocomplete({searchQuery: value})
        .then((res) => this.handleSuccess(res.data),
              (err) => this.handleFailure(err));
    } else {
      this.setState({
        dataSource: []
      });
    }
  };
  handleSuccess (response) {
    this.setState({dataSource: response.slice(0, 10)});
  }
  handleFailure (err) {
    console.log(err);
  }
  
  render () {
    return (
      <div>
        <AutoComplete
          floatingLabelText='Enter test'
          dataSource={this.state.dataSource}
          onUpdateInput={(val) => this.searchSomething(val)}
          fullWidth={true} />
      </div>
    );
  }
}

export default SearchInput;

Assuming I get a response object with data: [...] // an array of stuff. This is not being rendered.

The response object is something like:

reponse: {
  ....,
  data: ['Apple', 'Banana', 'Orange'],
  ....
}

Can anyone help me out?

Answer 1

According to this issue and mentioned comment, you just had to skip filter function by passing true for everything.

    <AutoComplete
          floatingLabelText='Enter test'
          dataSource={this.state.dataSource}
          onUpdateInput={(val) => this.searchSomething(val)}
          fullWidth={true} 
          filter={(searchText, key) => true} />