AsyncTypeahead - useCache not working

[jbialobr]

Version

3.4.5

Steps to reproduce

        <AsyncTypeahead
          isLoading={this.state.isLoading}
          options={this.state.options}
          minLength={3}
          useCache={true}
          onSearch={query =>
          {
            this.setState({ isLoading: true });
            this.props.service.searchContracts(query, 20).then(res =>
              this.setState({ isLoading: false, options: res?.map(o => o.number + this.contractInfo(o)) ?? [] }));
          }}
          placeholder="Wpisz fragment numeru umowy"
        />

Typing first 3 letters:

Typing the 4th letter:

Typing more letters:

One more letter:

Expected Behavior

For all the above substrings it should find a match.

Actual Behavior

It fails to find a match at random prefixes.
It works fine if useCache is disabled.

[ericgio]

Hi @jbialobr and thanks for the bug report. I'm unable to reproduce this issue using the async example. If you're able to do so, can you please provide more information to help me understand how I can reproduce? Thank you!

[jbialobr]

I investigated it further and found that the query result is cached in componentDidMount - which occurs after the render. So it first renders when the cachedQuery is an empty array, then it updates the cache, but no more render is invoked, because props do not change anymore.

I put some console.log lines:
in componentDidUpdate

          if (prevProps.isLoading && this.props.useCache) {
            console.log('prevProps: ' + JSON.stringify(prevProps));
            console.log('currProps: ' + JSON.stringify(this.props));
            this._cache[this._query] = this.props.options;
          }

and in render

          var allowNew = typeof props.allowNew === 'function' ? props.allowNew : props.allowNew && !props.isLoading;
          console.log('cachedQuery: ' + JSON.stringify(cachedQuery));
          console.log('props: ' + JSON.stringify(this.props));
          console.log('options: ' + JSON.stringify(options));

and here is what I got after typing ug0 (I stripped the localized texts to make it shorter):

cachedQuery: undefined
asyncContainer.js: 166 props: { "id": "1111", "isLoading": false, "allowNew": false, "multiple": false, "options": [], "minLength": 3, "useCache": true, "delay": 200 }
asyncContainer.js: 167 options: []
asyncContainer.js: 165 cachedQuery: undefined
asyncContainer.js: 166 props: { "id": "1111", "isLoading": true, "allowNew": false, "multiple": false, "options": [], "minLength": 3, "useCache": true, "delay": 200 }
asyncContainer.js: 167 options: []
asyncContainer.js: 165 cachedQuery: undefined
asyncContainer.js: 166 props: { "id": "1111", "isLoading": true, "allowNew": false, "multiple": false, "options": [], "minLength": 3, "useCache": true, "delay": 200 }
asyncContainer.js: 167 options: []
asyncContainer.js: 138 prevProps: { "id": "1111", "isLoading": true, "allowNew": false, "multiple": false, "options": [], "minLength": 3, "useCache": true, "delay": 200 }
asyncContainer.js: 139 currProps: { "id": "1111", "isLoading": true, "allowNew": false, "multiple": false, "options": [], "minLength": 3, "useCache": true, "delay": 200 }
asyncContainer.js: 165 cachedQuery: []
asyncContainer.js: 166 props: { "id": "1111", "isLoading": true, "allowNew": false, "multiple": false, "options": [], "minLength": 3, "useCache": true, "delay": 200 }
asyncContainer.js: 167 options: []
asyncContainer.js: 138 prevProps: { "id": "1111", "isLoading": true, "allowNew": false, "multiple": false, "options": [], "minLength": 3, "useCache": true, "delay": 200 }
asyncContainer.js: 139 currProps: { "id": "1111", "isLoading": true, "allowNew": false, "multiple": false, "options": [], "minLength": 3, "useCache": true, "delay": 200 }
asyncContainer.js: 165 cachedQuery: []
asyncContainer.js: 166 props: { "id": "1111", "isLoading": false, "allowNew": false, "multiple": false, "options": ["UG01/001/JAN"], "minLength": 3, "useCache": true, "delay": 200 }
asyncContainer.js: 167 options: ["UG01/001/JAN"]
asyncContainer.js: 138 prevProps: { "id": "1111", "isLoading": true, "allowNew": false, "multiple": false, "options": [], "minLength": 3, "useCache": true, "delay": 200 }
asyncContainer.js: 139 currProps: { "id": "1111", "isLoading": false, "allowNew": false, "multiple": false, "options": ["UG01/001/JAN"], "minLength": 3, "useCache": true, "delay": 200 }

[jbialobr]

After #521 the cachedQuery is undefined in render when a new search has completed, so it renders using the provided options.

[ericgio]

@jbialobr: Thanks for taking the time to provide additional information. It looks like the typeahead is being updated several times, which calls componentDidUpdate while the request is in progress and thus caches an empty response. I'm not sure why that's happening; it's possible the parent is updating itself or its children for some reason.

I'm still not able to actually reproduce the issue. Could you try editing this sandbox to produce a minimal test case? Thanks.

https://codesandbox.io/s/asynctypeahead-usecache-not-working-520-6okzt

[jbialobr]

@ericgio As you said, the parent component rendering while the request is in progress causes this issue. Here is a repro: https://codesandbox.io/s/asynctypeahead-usecache-not-working-520-2xrho?fontsize=14&hidenavigation=1&theme=dark

[ericgio]

@jbialobr thanks for following up and for the updated example! I really appreciate your help. If you want to update your PR to reflect changes in master, I'd be happy to merge it. Otherwise I'll just go ahead and make the change, since it's pretty straightforward.