fix(sqllab): avoid unexpected re-rendering on DatabaseSelector

apache · Sep 23, 2022 · b7a3ef8 · b7a3ef8
1 parent d67b046
commit b7a3ef8
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 37 deletions.
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -132,17 +132,7 @@ export default function DatabaseSelector({
 }: DatabaseSelectorProps) {
   const [loadingSchemas, setLoadingSchemas] = useState(false);
   const [schemaOptions, setSchemaOptions] = useState<SchemaValue[]>([]);
-  const [currentDb, setCurrentDb] = useState<DatabaseValue | undefined>(
-    db
-      ? {
-          label: (
-            <SelectLabel backend={db.backend} databaseName={db.database_name} />
-          ),
-          value: db.id,
-          ...db,
-        }
-      : undefined,
-  );
+  const [currentDb, setCurrentDb] = useState<DatabaseValue | undefined>();
   const [currentSchema, setCurrentSchema] = useState<SchemaValue | undefined>(
     schema ? { label: schema, value: schema } : undefined,
   );
@@ -208,6 +198,25 @@ export default function DatabaseSelector({
     [formMode, getDbList, sqlLabMode],
   );
 
+  useEffect(() => {
+    setCurrentDb(current =>
+      current?.id !== db?.id
+        ? db
+          ? {
+              label: (
+                <SelectLabel
+                  backend={db.backend}
+                  databaseName={db.database_name}
+                />
+              ),
+              value: db.id,
+              ...db,
+            }
+          : undefined
+        : current,
+    );
+  }, [db]);
+
   useEffect(() => {
     if (currentDb) {
       setLoadingSchemas(true);

diff --git a/superset-frontend/src/components/Select/AsyncSelect.tsx b/superset-frontend/src/components/Select/AsyncSelect.tsx
@@ -299,25 +299,21 @@ const AsyncSelect = forwardRef(
       [onError],
     );
 
-    const mergeData = useCallback(
-      (data: SelectOptionsType) => {
-        let mergedData: SelectOptionsType = [];
-        if (data && Array.isArray(data) && data.length) {
-          // unique option values should always be case sensitive so don't lowercase
-          const dataValues = new Set(data.map(opt => opt.value));
-          // merges with existing and creates unique options
-          setSelectOptions(prevOptions => {
-            mergedData = prevOptions
-              .filter(previousOption => !dataValues.has(previousOption.value))
-              .concat(data)
-              .sort(sortComparatorForNoSearch);
-            return mergedData;
-          });
-        }
-        return mergedData;
-      },
-      [sortComparatorForNoSearch],
-    );
+    const mergeData = useCallback((data: SelectOptionsType) => {
+      let mergedData: SelectOptionsType = [];
+      if (data && Array.isArray(data) && data.length) {
+        // unique option values should always be case sensitive so don't lowercase
+        const dataValues = new Set(data.map(opt => opt.value));
+        // merges with existing and creates unique options
+        setSelectOptions(prevOptions => {
+          mergedData = prevOptions
+            .filter(previousOption => !dataValues.has(previousOption.value))
+            .concat(data);
+          return mergedData;
+        });
+      }
+      return mergedData;
+    }, []);
 
     const fetchPage = useMemo(
       () => (search: string, page: number) => {
@@ -334,6 +330,7 @@ const AsyncSelect = forwardRef(
           return;
         }
         setIsLoading(true);
+
         const fetchOptions = options as SelectOptionsPagePromise;
         fetchOptions(search, page, pageSize)
           .then(({ data, totalCount }: SelectOptionsTypePage) => {
@@ -342,7 +339,7 @@ const AsyncSelect = forwardRef(
             setTotalCount(totalCount);
             if (
               !fetchOnlyOnSearch &&
-              value === '' &&
+              search === '' &&
               mergedData.length >= totalCount
             ) {
               setAllValuesLoaded(true);
@@ -360,7 +357,6 @@ const AsyncSelect = forwardRef(
         internalOnError,
         options,
         pageSize,
-        value,
       ],
     );
 
@@ -512,10 +508,6 @@ const AsyncSelect = forwardRef(
       [ref],
     );
 
-    useEffect(() => {
-      setSelectValue(value);
-    }, [value]);
-
     return (
       <StyledContainer>
         {header}

diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
@@ -258,7 +258,6 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
   function renderDatabaseSelector() {
     return (
       <DatabaseSelector
-        key={database?.id}
         db={database}
         emptyState={emptyState}
         formMode={formMode}