Merge pull request #3690 from csilkwor/Async_isLoading_fix

Manually set 'isLoading' state for async selects
JedWatson · Oct 2, 2019 · 8f48d9f · 8f48d9f
2 parents 7aae174 + 4cf6c43
commit 8f48d9f
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/nine-goats-care.md b/.changeset/nine-goats-care.md
@@ -0,0 +1,5 @@
+---
+"react-select": minor
+---
+
+Add `isLoading` prop support to the AsyncSelect component (see #3690)
diff --git a/packages/react-select/src/Async.js b/packages/react-select/src/Async.js
@@ -23,6 +23,7 @@ export type AsyncProps = {
   cacheOptions: any,
   onInputChange: (string, InputActionMeta) => void,
   inputValue?: string,
+  isLoading: boolean
 };
 
 export type Props = SelectProps & AsyncProps;
@@ -31,6 +32,7 @@ export const defaultProps = {
   cacheOptions: false,
   defaultOptions: false,
   filterOption: null,
+  isLoading: false
 };
 
 type State = {
@@ -158,7 +160,7 @@ export const makeAsyncSelect = <C: {}>(
       return inputValue;
     };
     render() {
-      const { loadOptions, ...props } = this.props;
+      const { loadOptions, isLoading: isLoadingProp, ...props } = this.props;
       const {
         defaultOptions,
         inputValue,
@@ -179,7 +181,7 @@ export const makeAsyncSelect = <C: {}>(
             this.select = ref;
           }}
           options={options}
-          isLoading={isLoading}
+          isLoading={isLoading || isLoadingProp}
           onInputChange={this.handleInputChange}
         />
       );

diff --git a/packages/react-select/src/__tests__/__snapshots__/Async.test.js.snap b/packages/react-select/src/__tests__/__snapshots__/Async.test.js.snap
@@ -140,6 +140,7 @@ exports[`defaults - snapshot 1`] = `
   cacheOptions={false}
   defaultOptions={false}
   filterOption={null}
+  isLoading={false}
 >
   <StateManager
     cacheOptions={false}

diff --git a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.js.snap b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.js.snap
@@ -140,6 +140,7 @@ exports[`defaults - snapshot 1`] = `
   cacheOptions={false}
   defaultOptions={false}
   filterOption={null}
+  isLoading={false}
 >
   <StateManager
     cacheOptions={false}