Async select prop to clear loadedOptions (#6000)

.changeset/tricky-ads-lie.md

@@ -0,0 +1,8 @@
+---
+'@react-select/docs': major
+'react-select': major
+---
+
+What: Option to clear loaded options on async select new search
+Why: With this option the loading indicator is more clear
+How: Just need to assign value to the property, without it the behavior is as before

docs/examples/AsyncClearLoadedOptions.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import AsyncSelect from 'react-select/async';
+import { ColourOption, colourOptions } from '../data';
+
+const filterColors = (inputValue: string) => {
+  return colourOptions.filter((i) =>
+    i.label.toLowerCase().includes(inputValue.toLowerCase())
+  );
+};
+
+const promiseOptions = (inputValue: string) =>
+  new Promise<ColourOption[]>((resolve) => {
+    setTimeout(() => {
+      resolve(filterColors(inputValue));
+    }, 1000);
+  });
+
+export default () => (
+  <AsyncSelect cacheOptions clearLoadedOptions loadOptions={promiseOptions} />
+);

docs/examples/index.tsx

@@ -2,6 +2,7 @@ export { default as AccessingInternals } from './AccessingInternals';
 export { default as ControlledMenu } from './ControlledMenu';
 export { default as AnimatedMulti } from './AnimatedMulti';
 export { default as AsyncCallbacks } from './AsyncCallbacks';
+export { default as AsyncClearLoadedOptions } from './AsyncClearLoadedOptions';
 export { default as AsyncCreatable } from './AsyncCreatable';
 export { default as AsyncPromises } from './AsyncPromises';
 export { default as BasicGrouped } from './BasicGrouped';

docs/pages/async/index.tsx

@@ -4,6 +4,7 @@ import ExampleWrapper from '../../ExampleWrapper';
 import md from '../../markdown/renderer';
 import {
   AsyncCallbacks,
+  AsyncClearLoadedOptions,
   AsyncMulti,
   AsyncPromises,
   DefaultOptions,
@@ -83,6 +84,20 @@ export default function Async() {
         <AsyncPromises />
       </ExampleWrapper>
     )}
+
+    ## clearLoadedOptions
+
+    The clearLoadedOptions prop determines if the loaded options will be cleared once a new search is inputed.
+
+    ${(
+      <ExampleWrapper
+        label="Async with clearLoadedOptions as true"
+        urlPath="docs/examples/AsyncClearLoadedOptions.tsx"
+        raw={require('!!raw-loader!../../examples/AsyncClearLoadedOptions.tsx')}
+      >
+        <AsyncClearLoadedOptions />
+      </ExampleWrapper>
+    )}
   `}
     </Fragment>
   );

packages/react-select/src/useAsync.ts

@@ -33,6 +33,11 @@ export interface AsyncAdditionalProps<Option, Group extends GroupBase<Option>> {
    * Async select is not currently waiting for loadOptions to resolve
    */
   isLoading?: boolean;
+  /**
+   * If clearLoadedOptions is truthy, then the loaded data will be
+   * cleared once a new search is inputed.
+   */
+  clearLoadedOptions?: any;
 }
 
 export type AsyncProps<
@@ -53,6 +58,7 @@ export default function useAsync<
   loadOptions: propsLoadOptions,
   options: propsOptions,
   isLoading: propsIsLoading = false,
+  clearLoadedOptions = false,
   onInputChange: propsOnInputChange,
   filterOption = null,
   ...restSelectProps
@@ -161,6 +167,7 @@ export default function useAsync<
       } else {
         const request = (lastRequest.current = {});
         setStateInputValue(inputValue);
+        if (clearLoadedOptions) setLoadedOptions([]);
         setIsLoading(true);
         setPassEmptyOptions(!loadedInputValue);
         loadOptions(inputValue, (options) => {
@@ -183,6 +190,7 @@ export default function useAsync<
       loadedInputValue,
       optionsCache,
       propsOnInputChange,
+      clearLoadedOptions,
     ]
   );