I am using code based off the Promise-based example in the React-Select Async documentation. The function fires off a request for the API to search contacts by email.
/**
* Searches for contacts that match string
* @param email
* @returns
*/
const findContacts = (email: string): Promise<OptionType[]> =>
getPersonByEmail(email)?.then((result: any[]) =>
result.map(c => {
return { label: c.emailAddress, value: c.emailAddress };
}))
.finally(() => setIsLoading(false));
const promiseOptions = (inputValue: string) =>
new Promise<OptionType[]>((resolve) => {
setTimeout(() => {
resolve(findContacts(inputValue));
}, 1000);
});
type OptionType = {
value: string;
label: string;
};
Here is the error I'm getting:
TypeScript error in /builds/org/admin/src/components/FormComponents/EmailAutoComplete.formcomponent.tsx(80,25):
75Type '(inputValue: string) => Promise<OptionType[] | null>' is not assignable to type '(inputValue: string, callback: (options: OptionsOrGroups<OptionType, GroupBase<OptionType>>) => void) => void | Promise<OptionsOrGroups<...>>'.
76 Type 'Promise<OptionType[] | null>' is not assignable to type 'void | Promise<OptionsOrGroups<OptionType, GroupBase<OptionType>>>'.
77 Type 'Promise<OptionType[] | null>' is not assignable to type 'Promise<OptionsOrGroups<OptionType, GroupBase<OptionType>>>'.
78 Type 'OptionType[] | null' is not assignable to type 'OptionsOrGroups<OptionType, GroupBase<OptionType>>'.
79 Type 'null' is not assignable to type 'readonly (OptionType | GroupBase<OptionType>)[]'. TS2322
80 78 | isClearable
81 79 | createOptionPosition="first" // Move create option to the top
82 > 80 | loadOptions={promiseOptions} // Promise that loads results
83 | ^
84 81 | formatCreateLabel={userInput => `Use ${userInput}`}
85 82 | isLoading={isLoading}
86 83 | openMenuOnClick={false}
87