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,44 +103,25 @@ const Slider = React.forwardRef<unknown, SliderProps>((props, ref) => {
       </SliderTooltip>
     );
   };
-
-  const renderSlider = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
-    const {
-      prefixCls: customizePrefixCls,
-      tooltipPrefixCls: customizeTooltipPrefixCls,
-      range,
-      className,
-      ...restProps
-    } = props;
-    const prefixCls = getPrefixCls('slider', customizePrefixCls);
-    const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
-    const cls = classNames(className, {
-      [`${prefixCls}-rtl`]: direction === 'rtl',
-    });
-    // make reverse default on rtl direction
-    if (direction === 'rtl' && !restProps.vertical) {
-      restProps.reverse = !restProps.reverse;
-    }
-    if (range) {
-      return (
-        <RcRange
-          {...restProps}
-          className={cls}
-          ref={ref}
-          handle={(info: HandleGeneratorInfo) =>
-            handleWithTooltip({
-              tooltipPrefixCls,
-              prefixCls,
-              info,
-            })
-          }
-          prefixCls={prefixCls}
-          tooltipPrefixCls={tooltipPrefixCls}
-        />
-      );
-    }
+  const {
+    prefixCls: customizePrefixCls,
+    tooltipPrefixCls: customizeTooltipPrefixCls,
+    range,
+    className,
+    ...restProps
+  } = props;
+  const prefixCls = getPrefixCls('slider', customizePrefixCls);
+  const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
+  const cls = classNames(className, {
+    [`${prefixCls}-rtl`]: direction === 'rtl',
+  });
+  // make reverse default on rtl direction
+  if (direction === 'rtl' && !restProps.vertical) {
+    restProps.reverse = !restProps.reverse;
+  }
+  if (range) {
     return (
-      <RcSlider
+      <RcRange
         {...restProps}
         className={cls}
         ref={ref}
@@ -154,11 +136,27 @@ const Slider = React.forwardRef<unknown, SliderProps>((props, ref) => {
         tooltipPrefixCls={tooltipPrefixCls}
       />
     );
-  };
-
-  return <ConfigConsumer>{renderSlider}</ConfigConsumer>;
+  }
+  return (
+    <RcSlider
+      {...restProps}
+      className={cls}
+      ref={ref}
+      handle={(info: HandleGeneratorInfo) =>
+        handleWithTooltip({
+          tooltipPrefixCls,
+          prefixCls,
+          info,
+        })
+      }
+      prefixCls={prefixCls}
+      tooltipPrefixCls={tooltipPrefixCls}
+    />
+  );
 });
 
+Slider.displayName = 'Slider';
+
 Slider.defaultProps = {
   tipFormatter(value: number) {
     return typeof value === 'number' ? value.toString() : '';