react-select icon indicating copy to clipboard operation
react-select copied to clipboard

search value reset's on item select from dropdown

Open ad9999 opened this issue 3 years ago • 2 comments

Are you reporting a bug or runtime error?

Bug

The following CSB link can be used to reproduce the issue or at least the behavior. https://codesandbox.io/s/react-select-v5-sandbox-y5jtm

Steps to reproduce

  1. Type in some text to search.
  2. user observes 3-4 items from search results.
  3. user selects one item from the results
  4. the search keyword disappears
  5. dropdown items reset

Expected result

Upon selecting an item from the search results, the search keyword and search result should persist so the user doesn't have to click, type, select again from the list

Are there any props or tricks in callbacks that can help retain search keywords and search results after the user selects an item from the dropdown?

ad9999 avatar Oct 03 '22 17:10 ad9999

From what I understand, this is intended. The documentation mentions that there used to be a onSelectResetsInput flag. This no longer exists in the current version.

The documentation shows how to emulate this flag, but the provided example no longer works for me. It relies on returning the desired input value from onInputChange. However, onInputChange is a void function, so the value gets ignored.

Sjlver avatar Aug 02 '24 09:08 Sjlver

Edit: the new value doesn't really get ignored?

  • onInputChange declared as void here: https://github.com/JedWatson/react-select/blob/06e34882638d1526b9f5a1238bb567a3e9460ce5/packages/react-select/src/Select.tsx#L236
  • There are many cases where its return value is ignored, like here: https://github.com/JedWatson/react-select/blob/06e34882638d1526b9f5a1238bb567a3e9460ce5/packages/react-select/src/Select.tsx#L878
  • There are some cases where its input value is used as documented: https://github.com/JedWatson/react-select/blob/06e34882638d1526b9f5a1238bb567a3e9460ce5/packages/react-select/src/utils.ts#L150

The onSelectResetsInput example seems to work with a regular ReactSelect, but not with an AsyncSelect.

Sjlver avatar Aug 02 '24 09:08 Sjlver