JedWatson / JedWatson/react-select

Incorrect options can be shown when using loadOptions and cacheOptions

Open
#4,645 3 comments 8 reactions 0 assignees View on GitHub

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:

  1. Enter a search term, e.g. 'abc'
  2. The results for 'abc' will be loaded and cached.
  3. Type 'd', then immediately press backspace.
  4. The loading indicator disappears and the cached results for 'abc' are shown.
  5. 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

https://github.com/JedWatson/react-select/blob/a92c09a836450cbb849f3a90eade18e1320cb651/packages/react-select/src/useAsync.ts#L167-L190

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.