fix: getPopupContainer not work inject by ConfigProvider (ant-design#…

…40781) (ant-design#40871) * fix: getPopupContainer not work inject by ConfigProvider (ant-design#40781) * test: remove snapshot * test: fix snapshots
RedJue · Apr 25, 2023 · c01940b · c01940b
1 parent 8c1d0b0
commit c01940b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git a/components/table/InternalTable.tsx b/components/table/InternalTable.tsx
@@ -28,22 +28,22 @@ import type { SortState } from './hooks/useSorter';
 import useSorter, { getSortData } from './hooks/useSorter';
 import useTitleColumns from './hooks/useTitleColumns';
 import type {
+  ColumnsType,
   ColumnTitleProps,
   ColumnType,
   ExpandableConfig,
   ExpandType,
   FilterValue,
   GetPopupContainer,
   GetRowKey,
+  RefInternalTable,
   SorterResult,
   SortOrder,
   TableAction,
   TableCurrentDataSource,
   TableLocale,
-  TableRowSelection,
-  ColumnsType,
   TablePaginationConfig,
-  RefInternalTable,
+  TableRowSelection,
 } from './interface';
 import RcTable from './RcTable';
 
@@ -114,6 +114,7 @@ function InternalTable<RecordType extends object = any>(
   props: InternalTableProps<RecordType>,
   ref: React.MutableRefObject<HTMLDivElement>,
 ) {
+  const { getPopupContainer: getContextPopupContainer } = React.useContext(ConfigContext);
   const {
     prefixCls: customizePrefixCls,
     className,
@@ -323,7 +324,7 @@ function InternalTable<RecordType extends object = any>(
     dropdownPrefixCls,
     mergedColumns,
     onFilterChange,
-    getPopupContainer,
+    getPopupContainer: getPopupContainer || getContextPopupContainer,
   });
   const mergedData = getFilterData(sortedData, filterStates);
 
@@ -408,7 +409,7 @@ function InternalTable<RecordType extends object = any>(
     expandType,
     childrenColumnName,
     locale: tableLocale,
-    getPopupContainer,
+    getPopupContainer: getPopupContainer || getContextPopupContainer,
   });
 
   const internalRowClassName = (record: RecordType, index: number, indent: number) => {

diff --git a/components/table/__tests__/Table.test.tsx b/components/table/__tests__/Table.test.tsx
@@ -1,5 +1,5 @@
 import { ConfigProvider } from 'antd';
-import React from 'react';
+import React, { useRef } from 'react';
 import type { TableProps } from '..';
 import Table from '..';
 import mountTest from '../../../tests/shared/mountTest';
@@ -369,4 +369,36 @@ describe('Table', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('support getPopupContainer inject by ConfigProvider', async () => {
+    const columns = [
+      {
+        title: 'title',
+        key: 'title',
+        dataIndex: 'title',
+        filters: [
+          {
+            text: 'filter',
+            value: 'filter',
+          },
+        ],
+      },
+    ];
+    const Demo = () => {
+      const wrapRef = useRef(null);
+      return (
+        <ConfigProvider getPopupContainer={wrapRef.current!}>
+          <div ref={wrapRef}>
+            <Table columns={columns} />
+          </div>
+        </ConfigProvider>
+      );
+    };
+
+    const { container } = render(<Demo />);
+
+    fireEvent.click(container.querySelector('.ant-table-filter-trigger')!);
+    await waitFakeTimer();
+    expect(container.querySelector('.ant-dropdown')).toBeTruthy();
+  });
 });