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 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((resolve) => { + setTimeout(() => { + resolve(filterColors(inputValue)); + }, 1000); + }); + +export default () => ( + +); 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() { )} + + ## clearLoadedOptions + + The clearLoadedOptions prop determines if the loaded options will be cleared once a new search is inputed. + + ${( + + + + )} `} ); diff --git a/packages/react-select/src/useAsync.ts b/packages/react-select/src/useAsync.ts index 334f66d7f2..ebc5613135 100644 --- a/packages/react-select/src/useAsync.ts +++ b/packages/react-select/src/useAsync.ts @@ -33,6 +33,11 @@ export interface AsyncAdditionalProps> { * 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, ] );