From 1fe95ecffa3ce4298f661a6ce2aad5fa5f436590 Mon Sep 17 00:00:00 2001
From: LLmoskk <1398145450@qq.com>
Date: Fri, 26 Jul 2024 13:38:55 +0800
Subject: [PATCH] fix: should not display overlay when the content is
 null/undefined (#50064)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: content结果为null的情况不显示overlay

* fix: 兼容undefined与null

* Update index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update getRenderPropValue.ts

Signed-off-by: lijianan <574980606@qq.com>

* chore: update snap

* Update index.test.tsx

Signed-off-by: lijianan <574980606@qq.com>

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: H JY <huangjunyi@ama-auto.com>
Co-authored-by: lijianan <574980606@qq.com>
---
 .../__tests__/__snapshots__/index.test.tsx.snap   |  3 ---
 components/popover/__tests__/index.test.tsx       | 13 +++++++++++++
 components/popover/index.tsx                      | 15 ++++++++++-----
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/components/popover/__tests__/__snapshots__/index.test.tsx.snap b/components/popover/__tests__/__snapshots__/index.test.tsx.snap
index b2ed21cc66..28f634a759 100644
--- a/components/popover/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/popover/__tests__/__snapshots__/index.test.tsx.snap
@@ -27,9 +27,6 @@ Array [
         >
           RTL
         </div>
-        <div
-          class="ant-popover-inner-content"
-        />
       </div>
     </div>
   </div>,
diff --git a/components/popover/__tests__/index.test.tsx b/components/popover/__tests__/index.test.tsx
index 7f3319e137..2764ef002c 100644
--- a/components/popover/__tests__/index.test.tsx
+++ b/components/popover/__tests__/index.test.tsx
@@ -124,4 +124,17 @@ describe('Popover', () => {
     fireEvent.keyDown(triggerNode, { key: 'Escape', keyCode: 27 });
     expect(onOpenChange).toHaveBeenLastCalledWith(false, eventObject);
   });
+
+  it('should not display overlay when the content is null/undefined', () => {
+    [null, undefined].forEach((item) => {
+      const { container } = render(
+        <Popover title={() => item} content={() => item} trigger="click">
+          <span>show me your code</span>
+        </Popover>,
+      );
+      fireEvent.click(container.querySelector<HTMLSpanElement>('span')!);
+      const popup = document.querySelector('.ant-popover');
+      expect(popup).toBe(null);
+    });
+  });
 });
diff --git a/components/popover/index.tsx b/components/popover/index.tsx
index 7b1a52e11d..4905533c5b 100644
--- a/components/popover/index.tsx
+++ b/components/popover/index.tsx
@@ -25,14 +25,14 @@ export interface PopoverProps extends AbstractTooltipProps {
 
 interface OverlayProps {
   prefixCls?: string;
-  title?: PopoverProps['title'];
-  content?: PopoverProps['content'];
+  title?: React.ReactNode;
+  content?: React.ReactNode;
 }
 
 const Overlay: React.FC<OverlayProps> = ({ title, content, prefixCls }) => (
   <>
-    {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
-    <div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
+    {title && <div className={`${prefixCls}-title`}>{title}</div>}
+    {content && <div className={`${prefixCls}-inner-content`}>{content}</div>}
   </>
 );
 
@@ -81,6 +81,9 @@ const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref)
     settingOpen(value);
   };
 
+  const titleNode = getRenderPropValue(title);
+  const contentNode = getRenderPropValue(content);
+
   return wrapCSSVar(
     <Tooltip
       placement={placement}
@@ -95,7 +98,9 @@ const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref)
       open={open}
       onOpenChange={onInternalOpenChange}
       overlay={
-        title || content ? <Overlay prefixCls={prefixCls} title={title} content={content} /> : null
+        titleNode || contentNode ? (
+          <Overlay prefixCls={prefixCls} title={titleNode} content={contentNode} />
+        ) : null
       }
       transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
       data-popover-inject