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

apache · Sep 23, 2022 · e2b77a7 · e2b77a7
1 parent 2ec744d
commit e2b77a7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 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
@@ -185,6 +185,7 @@ const AsyncSelect = forwardRef(
     const [totalCount, setTotalCount] = useState(0);
     const [loadingEnabled, setLoadingEnabled] = useState(!lazyLoading);
     const [allValuesLoaded, setAllValuesLoaded] = useState(false);
+    const selectValueRef = useRef(selectValue);
     const fetchedQueries = useRef(new Map<string, number>());
     const mappedMode = isSingleMode
       ? undefined
@@ -193,10 +194,14 @@ const AsyncSelect = forwardRef(
       : 'multiple';
     const allowFetch = !fetchOnlyOnSearch || inputValue;
 
+    useEffect(() => {
+      selectValueRef.current = selectValue;
+    }, [selectValue]);
+
     const sortSelectedFirst = useCallback(
       (a: AntdLabeledValue, b: AntdLabeledValue) =>
-        sortSelectedFirstHelper(a, b, selectValue),
-      [selectValue],
+        sortSelectedFirstHelper(a, b, selectValueRef.current),
+      [],
     );
 
     const sortComparatorWithSearch = useCallback(
@@ -334,6 +339,7 @@ const AsyncSelect = forwardRef(
           return;
         }
         setIsLoading(true);
+
         const fetchOptions = options as SelectOptionsPagePromise;
         fetchOptions(search, page, pageSize)
           .then(({ data, totalCount }: SelectOptionsTypePage) => {
@@ -342,7 +348,7 @@ const AsyncSelect = forwardRef(
             setTotalCount(totalCount);
             if (
               !fetchOnlyOnSearch &&
-              value === '' &&
+              search === '' &&
               mergedData.length >= totalCount
             ) {
               setAllValuesLoaded(true);
@@ -360,7 +366,6 @@ const AsyncSelect = forwardRef(
         internalOnError,
         options,
         pageSize,
-        value,
       ],
     );
 
@@ -512,10 +517,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}