AsyncTypeahead is not showing results

Version

3.0.3

Steps to reproduce

I am creating an async typeahead that searches for clients using our API’s advanced query filtering that matches on multiple attributes.

          <AsyncTypeahead
            placeholder="Search for a client by name, address, phone, etc."
            onSearch={this.onSearch}
            isLoading={this.state.isSearchLoading}
            options={this.state.options}
            renderMenuItemChildren={(c, props) => {
              console.log(c);
              return <div key={c.id}>{c.searchPreviewStr}</div>;
            }}/>

And here is my onSearch method:

  onSearch = async (query: string) => {
    this.setState({isSearchLoading: true});
    const { data }: any = await getApolloClient().query({
      query: gql`
        query ($searchStr: String!) {
          allClients(first: 10, search: $searchStr) {
            edges { node { ${CLIENT_WITH_CONTACT_NAME_GQL_QUERY_FIELDS} }}
          }
        }
      `,
      variables: {
        searchStr: query
      }
    });

    this.setState({
      options: data.allClients.edges.map((attrs: any) => new Client(attrs.node)),
      isSearchLoading: false
    });
  };

onSearch issues an async query and sets the state. I’m confident it’s setting the state properly because I can console.log this.state.options in the render method, and I see the results.

Expected Behavior

It should display my results exactly using my custom renderMenuItemChildren method without any further filtering.

Actual Behavior

It appears to be trying to do some extra filtering using the default filterBy attribute.

The typeahead shows “No results found”, and the JS console displays this error: Warning: [react-bootstrap-typeahead] Fields passed to filterBy should have string values. Value will be converted to a string; results may be unexpected..

Notice I have a console.log in my renderMenuItemChildren. This never gets called, so the error happens before the menu attempts rendering.

[lehresman]

Yep, thanks. That fixed it. I jumped straight to the AsyncTypeahead section of the docs and skipped the Data section.

[ericgio]

@lehresman: What’s the shape of the data in this.state.options? It looks like you’re possibly creating some custom objects and the typeahead may be getting something it doesn’t expect.