From 183f452be6bc35f24cfdff18139bb2ffc3a66a9e Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <michael.s.molina@gmail.com>
Date: Wed, 15 Sep 2021 14:29:43 -0300
Subject: [PATCH] Handles the logic in handlePaginateFetch and removes the use
 effect

---
 .../src/components/Select/Select.tsx          | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index 09447b85214cb..e70527438115d 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -334,6 +334,7 @@ const Select = ({
     });
 
   const handleData = (data: OptionsType) => {
+    let mergedData: OptionsType = [];
     if (data && Array.isArray(data) && data.length) {
       const dataValues = new Set();
       data.forEach(option =>
@@ -341,14 +342,18 @@ const Select = ({
       );
 
       // merges with existing and creates unique options
-      setSelectOptions(prevOptions => [
-        ...prevOptions.filter(
-          previousOption =>
-            !dataValues.has(String(previousOption.value).toLocaleLowerCase()),
-        ),
-        ...data,
-      ]);
+      setSelectOptions(prevOptions => {
+        mergedData = [
+          ...prevOptions.filter(
+            previousOption =>
+              !dataValues.has(String(previousOption.value).toLocaleLowerCase()),
+          ),
+          ...data,
+        ];
+        return mergedData;
+      });
     }
+    return mergedData;
   };
 
   const handlePaginatedFetch = useMemo(
@@ -370,9 +375,16 @@ const Select = ({
       const fetchOptions = options as OptionsPagePromise;
       fetchOptions(value, page, pageSize)
         .then(({ data, totalCount }: OptionsTypePage) => {
-          handleData(data);
+          const mergedData = handleData(data);
           fetchedQueries.current.set(key, totalCount);
           setTotalCount(totalCount);
+          if (
+            !fetchOnlyOnSearch &&
+            value === '' &&
+            mergedData.length >= totalCount
+          ) {
+            setAllValuesLoaded(true);
+          }
         })
         .catch(onError)
         .finally(() => {
@@ -380,7 +392,7 @@ const Select = ({
           setIsTyping(false);
         });
     },
-    [allValuesLoaded, options],
+    [allValuesLoaded, fetchOnlyOnSearch, options],
   );
 
   const handleOnSearch = useMemo(
@@ -564,12 +576,6 @@ const Select = ({
     }
   }, [isLoading, loading]);
 
-  useEffect(() => {
-    if (!fetchOnlyOnSearch && searchedValue === '' && totalCount > 0) {
-      setAllValuesLoaded(selectOptions.length >= totalCount);
-    }
-  }, [fetchOnlyOnSearch, searchedValue, selectOptions.length, totalCount]);
-
   return (
     <StyledContainer>
       {header}