React-bootstrap-typeahead: AsyncTypeahead is not showing results

[lehresman]

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 tofilterByshould 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]

Just to clarify: my query IS being executed, and the results are coming back properly from the server. In my testing, I can console.log(this.state.options) in the render method, and see 4 client objects returned.

[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.

[lehresman]

Yes, it's a custom object. But does it matter? I'm rendering the output myself in renderMenuItemChildren. Or does the options shape need to be in a specific format?

The shape is:

class Client extends BaseModel {
  @observable id: string;
  @observable status: string;
  @observable companyName: string;
  @observable defaultContact: Contact;

  constructor(attrs: any = {}) {
    super(attrs);
    Object.assign(this, attrs);

    if (attrs.defaultContact) {
      this.defaultContact = new Contact(attrs.defaultContact);
    }
  }

  @computed get displayName() {
    if (this.companyName) return this.companyName;
    if (this.defaultContact) return this.defaultContact.displayName;
    return COMMON_STRINGS.unnamedClient;
  }

  @computed get searchPreviewStr() {
    let parts = [];
    if (this.companyName) parts.push(this.companyName);
    if (this.defaultContact) {
      parts.push(this.defaultContact.displayName);
      if (this.defaultContact.defaultAddress) {
        parts.push(this.defaultContact.defaultAddress.singleLine);
      }
    }
    return parts.join(" - ");
  }
}

[ericgio]

It does matter. The typeahead is trying to access the object but doesn't know how. That's why you're seeing the error.

[lehresman]

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

[ortonomy]

@lehresman -- I can't find a data section on http://ericgio.github.io/react-bootstrap-typeahead/

What is the shape of the options object? I can't find it ...

[ortonomy]

OK, no, I did find it. It seems the docs on the github repo are more comprehensive than those on the github.io site

[jhoanborges]

543