fix: ConfigProvider getPopupContainer invalid (#23594)

* fix: ConfigProvider getPopupContainer invalid

* slider getPopupContainer

* Create container.test.js

* Update container.test.js

components/config-provider/__tests__/container.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ConfigProvider from '..';
+import DatePicker from '../../date-picker';
+import Slider from '../../slider';
+
+describe('ConfigProvider.GetPopupContainer', () => {
+  it('Datepicker', () => {
+    const getPopupContainer = jest.fn(node => node.parentNode);
+    mount(
+      <ConfigProvider getPopupContainer={getPopupContainer}>
+        <DatePicker open />
+      </ConfigProvider>,
+    );
+    expect(getPopupContainer).toHaveBeenCalled();
+  });
+
+  it('Slider', () => {
+    const getPopupContainer = jest.fn(node => node.parentNode);
+    const wrapper = mount(
+      <ConfigProvider getPopupContainer={getPopupContainer}>
+        <Slider />
+      </ConfigProvider>,
+    );
+    wrapper.find('.ant-slider-handle').first().simulate('mouseenter');
+    expect(getPopupContainer).toHaveBeenCalled();
+  });
+});

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -49,9 +49,10 @@ export default function generateRangePicker<DateType>(
     };
 
     renderPicker = (locale: PickerLocale) => {
-      const { getPrefixCls, direction } = this.context;
+      const { getPrefixCls, direction, getPopupContainer } = this.context;
       const {
         prefixCls: customizePrefixCls,
+        getPopupContainer: customGetPopupContainer,
         className,
         size: customizeSize,
         bordered = true,
@@ -94,6 +95,7 @@ export default function generateRangePicker<DateType>(
                 {...additionalOverrideProps}
                 locale={locale!.lang}
                 prefixCls={prefixCls}
+                getPopupContainer={customGetPopupContainer || getPopupContainer}
                 generateConfig={generateConfig}
                 prevIcon={<span className={`${prefixCls}-prev-icon`} />}
                 nextIcon={<span className={`${prefixCls}-next-icon`} />}

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -62,9 +62,10 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
       };
 
       renderPicker = (locale: PickerLocale) => {
-        const { getPrefixCls, direction } = this.context;
+        const { getPrefixCls, direction, getPopupContainer } = this.context;
         const {
           prefixCls: customizePrefixCls,
+          getPopupContainer: customizeGetPopupContainer,
           className,
           size: customizeSize,
           bordered = true,
@@ -115,6 +116,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                     [`${prefixCls}-borderless`]: !bordered,
                   })}
                   prefixCls={prefixCls}
+                  getPopupContainer={customizeGetPopupContainer || getPopupContainer}
                   generateConfig={generateConfig}
                   prevIcon={<span className={`${prefixCls}-prev-icon`} />}
                   nextIcon={<span className={`${prefixCls}-next-icon`} />}

components/slider/index.tsx

@@ -5,7 +5,7 @@ import RcHandle from 'rc-slider/lib/Handle';
 import classNames from 'classnames';
 import { TooltipPlacement } from '../tooltip';
 import SliderTooltip from './SliderTooltip';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 
 export interface SliderMarks {
   [key: number]:
@@ -60,6 +60,7 @@ export interface SliderProps {
 export type Visibles = { [index: number]: boolean };
 
 const Slider = React.forwardRef<unknown, SliderProps>((props, ref) => {
+  const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext);
   const [visibles, setVisibles] = React.useState<Visibles>({});
 
   const toggleTooltipVisible = (index: number, visible: boolean) => {
@@ -91,7 +92,7 @@ const Slider = React.forwardRef<unknown, SliderProps>((props, ref) => {
         transitionName="zoom-down"
         key={index}
         overlayClassName={`${prefixCls}-tooltip`}
-        getPopupContainer={getTooltipPopupContainer || (() => document.body)}
+        getPopupContainer={getTooltipPopupContainer || getPopupContainer || (() => document.body)}
       >
         <RcHandle
           {...restProps}
@@ -102,8 +103,6 @@ const Slider = React.forwardRef<unknown, SliderProps>((props, ref) => {
       </SliderTooltip>
     );
   };
-
-  const renderSlider = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
   const {
     prefixCls: customizePrefixCls,
     tooltipPrefixCls: customizeTooltipPrefixCls,
@@ -154,11 +153,10 @@ const Slider = React.forwardRef<unknown, SliderProps>((props, ref) => {
       tooltipPrefixCls={tooltipPrefixCls}
     />
   );
-  };
-
-  return <ConfigConsumer>{renderSlider}</ConfigConsumer>;
 });
 
+Slider.displayName = 'Slider';
+
 Slider.defaultProps = {
   tipFormatter(value: number) {
     return typeof value === 'number' ? value.toString() : '';