floating table git issue

apache · Mar 29, 2021 · 552e6f9 · 552e6f9
1 parent 9fa52b5
commit 552e6f9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
@@ -142,6 +142,7 @@ export default class SqlEditorLeftBar extends React.PureComponent {
           schema={qe.schema}
           sqlLabMode
           tableNameSticky={false}
+          useDocumentBody
         />
         <div className="divider" />
         <StyledScrollbarContainer>

diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -72,6 +72,7 @@ interface DatabaseSelectorProps {
   readOnly?: boolean;
   schema?: string;
   sqlLabMode?: boolean;
+  useDocumentBody?: boolean;
   onChange?: ({
     dbId,
     schema,
@@ -96,14 +97,15 @@ export default function DatabaseSelector({
   readOnly = false,
   schema,
   sqlLabMode = false,
+  useDocumentBody = false,
 }: DatabaseSelectorProps) {
   const [currentDbId, setCurrentDbId] = useState(dbId);
   const [currentSchema, setCurrentSchema] = useState<string | undefined>(
     schema,
   );
   const [schemaLoading, setSchemaLoading] = useState(false);
   const [schemaOptions, setSchemaOptions] = useState([]);
-
+  let TableRef: HTMLElement;
   function fetchSchemas(databaseId: number, forceRefresh = false) {
     const actualDbId = databaseId || dbId;
     if (actualDbId) {
@@ -246,6 +248,7 @@ export default function DatabaseSelector({
         autoSelect
         isDisabled={!isDatabaseSelectEnabled || readOnly}
         menuPosition="fixed"
+        menuPortalTarget={useDocumentBody ? document.body : TableRef}
       />,
       null,
     );

diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
@@ -104,6 +104,7 @@ interface TableSelectorProps {
   sqlLabMode?: boolean;
   tableName?: string;
   tableNameSticky?: boolean;
+  useDocumentBody?: boolean;
 }
 
 const TableSelector: FunctionComponent<TableSelectorProps> = ({
@@ -124,6 +125,7 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
   sqlLabMode = true,
   tableName,
   tableNameSticky = true,
+  useDocumentBody = false,
 }) => {
   const [currentSchema, setCurrentSchema] = useState<string | undefined>(
     schema,
@@ -133,7 +135,7 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
   );
   const [tableLoading, setTableLoading] = useState(false);
   const [tableOptions, setTableOptions] = useState([]);
-
+  let TableRef: HTMLElement;
   function fetchTables(
     databaseId?: number,
     schema?: string,
@@ -303,6 +305,7 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
         sqlLabMode={sqlLabMode}
         isDatabaseSelectEnabled={isDatabaseSelectEnabled && !readOnly}
         readOnly={readOnly}
+        useDocumentBody={useDocumentBody}
       />
     );
   }
@@ -317,6 +320,7 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
           name="select-table"
           isLoading={tableLoading}
           ignoreAccents={false}
+          menuShouldScrollIntoView={false}
           placeholder={t('Select table or type table name')}
           autosize={false}
           onChange={changeTable}
@@ -327,6 +331,10 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
           valueRenderer={renderTableOption}
           isDisabled={readOnly}
           menuPosition="fixed"
+          menuPortalTarget={useDocumentBody ? document.body : TableRef}
+          styles={{
+            menuPortal: base => ({ ...base, zIndex: 9999 }),
+          }}
         />
       );
     } else if (formMode) {