Merge pull request #129 from osstotalsoft/bugfix/autocomplete-lazy-lo…

…ading Bugfix/autocomplete lazy loading
osstotalsoft · Sep 5, 2024 · 5eb6816 · 5eb6816
2 parents f1909fc + 8bcef33
commit 5eb6816
Showing 1 changed file with 9 additions and 14 deletions.
diff --git a/src/components/inputs/Autocomplete/Autocomplete.tsx b/src/components/inputs/Autocomplete/Autocomplete.tsx
@@ -111,30 +111,30 @@ const Autocomplete: React.FC<AutocompleteProps<any, any, any, any>> = ({
   )
 
   const handleLoadOptions = useCallback(
-    (input?: string) => {
+    async (input?: string) => {
       if (!loadOptions) return
       if (!isPaginated) {
         setLocalLoading(true)
-        ;(loadOptions as LoadOptions)(input).then(loadedOptions => {
-          setAsyncOptions(loadedOptions || [])
-          setLocalLoading(false)
-        })
+        const loadedOptions = await (loadOptions as LoadOptions)(input)
+        setAsyncOptions(loadedOptions || [])
+        setLocalLoading(false)
       } else handleLoadOptionsPaginated(input)
     },
     [handleLoadOptionsPaginated, isPaginated, loadOptions]
   )
 
   const handleMenuOpen = useCallback(
-    (event: React.SyntheticEvent<Element, Event>) => {
+    async (event: React.SyntheticEvent<Element, Event>) => {
       if (onOpen) onOpen(event)
-      handleLoadOptions(localInput)
+      await handleLoadOptions(localInput)
     },
     [handleLoadOptions, localInput, onOpen]
   )
 
   const handleMenuClose = useCallback(
     (event: React.SyntheticEvent<Element, Event>, reason: AutocompleteCloseReason) => {
       setLocalInput('')
+      setAsyncOptions([])
       if (onClose) onClose(event, reason)
     },
     [onClose]
@@ -269,21 +269,16 @@ const Autocomplete: React.FC<AutocompleteProps<any, any, any, any>> = ({
   )
 
   const handleInputChange = useCallback(
-    (event: React.SyntheticEvent, value: string, reason: AutocompleteInputChangeReason) => {
+    async (event: React.SyntheticEvent, value: string, reason: AutocompleteInputChangeReason) => {
       setLocalInput(value ? value : '')
       if (onInputChange) onInputChange(event, value, reason)
 
       // this prevents the component from calling loadOptions again when the user clicks outside it and the menu closes
       if (event?.nativeEvent?.type === 'focusout') {
         return
       }
-
-      if (loadOptions) {
-        setLocalLoading(true)
-        handleLoadOptions(value)
-      }
     },
-    [handleLoadOptions, loadOptions, onInputChange]
+    [onInputChange]
   )
 
   useEffect(() => {