From 37a44af8daf35cca3c7ed947373e550a3c5e935e Mon Sep 17 00:00:00 2001
From: vinicius-frs <viniciusfrsantos@outlook.com>
Date: Wed, 29 Jan 2025 09:57:25 -0300
Subject: [PATCH 1/3] Async select prop to clear loadedOptions

---
 docs/examples/AsyncClearLoadedOptions.tsx | 21 +++++++++++++++++++++
 docs/examples/index.tsx                   |  1 +
 docs/pages/async/index.tsx                | 15 +++++++++++++++
 packages/react-select/src/useAsync.ts     |  8 ++++++++
 4 files changed, 45 insertions(+)
 create mode 100644 docs/examples/AsyncClearLoadedOptions.tsx

diff --git a/docs/examples/AsyncClearLoadedOptions.tsx b/docs/examples/AsyncClearLoadedOptions.tsx
new file mode 100644
index 0000000000..0ec616fa93
--- /dev/null
+++ b/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} />
+);
diff --git a/docs/examples/index.tsx b/docs/examples/index.tsx
index e8bff14f43..2c89a01fc4 100644
--- a/docs/examples/index.tsx
+++ b/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';
diff --git a/docs/pages/async/index.tsx b/docs/pages/async/index.tsx
index 25ee5d5083..852baf135c 100644
--- a/docs/pages/async/index.tsx
+++ b/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>
   );
diff --git a/packages/react-select/src/useAsync.ts b/packages/react-select/src/useAsync.ts
index 334f66d7f2..8b4cde6453 100644
--- a/packages/react-select/src/useAsync.ts
+++ b/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,
     ]
   );
 

From 9fd60e7c70adc405d33aba4edcba8eef346e9ec4 Mon Sep 17 00:00:00 2001
From: vinicius-frs <viniciusfrsantos@outlook.com>
Date: Wed, 29 Jan 2025 10:45:19 -0300
Subject: [PATCH 2/3] Prettier fix

---
 packages/react-select/src/useAsync.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-select/src/useAsync.ts b/packages/react-select/src/useAsync.ts
index 8b4cde6453..ebc5613135 100644
--- a/packages/react-select/src/useAsync.ts
+++ b/packages/react-select/src/useAsync.ts
@@ -167,7 +167,7 @@ export default function useAsync<
       } else {
         const request = (lastRequest.current = {});
         setStateInputValue(inputValue);
-        if(clearLoadedOptions) setLoadedOptions([]);
+        if (clearLoadedOptions) setLoadedOptions([]);
         setIsLoading(true);
         setPassEmptyOptions(!loadedInputValue);
         loadOptions(inputValue, (options) => {

From b8bb251f58d7fc74caea04f014f2bb64f7efb2b4 Mon Sep 17 00:00:00 2001
From: vinicius-frs <viniciusfrsantos@outlook.com>
Date: Mon, 24 Feb 2025 11:24:00 -0300
Subject: [PATCH 3/3] Add changeset

---
 .changeset/tricky-ads-lie.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/tricky-ads-lie.md

diff --git a/.changeset/tricky-ads-lie.md b/.changeset/tricky-ads-lie.md
new file mode 100644
index 0000000000..97c338ff5e
--- /dev/null
+++ b/.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