JedWatson / JedWatson/react-select
Incorrect options can be shown when using loadOptions and cacheOptions
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Hello,
I have an issue when using AsyncSelect with loadOptions and cacheOptions.
If a user enters a search term then changes the search term to a value that is cached (before loadOptions resolves), then the cached options is shown and then replaced with the response from loadOptions.
Reproduction steps:
- Enter a search term, e.g. 'abc'
- The results for 'abc' will be loaded and cached.
- Type 'd', then immediately press backspace.
- The loading indicator disappears and the cached results for 'abc' are shown.
- The results for 'abcd' then are loaded and shown on the screen. This is invalid as the current search is 'abc'.
https://codesandbox.io/s/react-select-v3-sandbox-forked-83xc8
Looking at the code, there is a check that each request is the latest request: if (request !== lastRequest.current) return;
The latest request is set to a new value before loading more options: const request = (lastRequest.current = {});
However for a cached value the latestRequest.current is not changed or reset to undefined.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/react-select/src/useAsync.ts around lines 167-190 and reproduce the AsyncSelect flow from the linked CodeSandbox. Trace how the latest request marker behaves when a cached value is used while an earlier loadOptions call is pending. Done means stale results are not shown for the current search term and the reported reproduction no longer occurs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100