fix: Popover display empty div when title and content is null (#42217)

* fix: Popover display empty div when title and content is null

* test: Popover add test

* lint: remove useless block statement

---------

Co-authored-by: MaHui <mahuiyoung@cmbchina.com>

components/popover/__tests__/index.test.tsx

@@ -49,8 +49,8 @@ describe('Popover', () => {
     );
     fireEvent.click(container.querySelector('span')!);
 
-    expect(container.querySelector('.ant-popover-title')?.textContent).toBeFalsy();
+    const popup = document.querySelector('.ant-popover');
-    expect(container.querySelector('.ant-popover-inner-content')?.textContent).toBeFalsy();
+    expect(popup).toBe(null);
   });
 
   it('should not render popover when the title & content props is empty', () => {
@@ -61,8 +61,8 @@ describe('Popover', () => {
     );
     fireEvent.click(container.querySelector('span')!);
 
-    expect(container.querySelector('.ant-popover-title')?.textContent).toBeFalsy();
+    const popup = document.querySelector('.ant-popover');
-    expect(container.querySelector('.ant-popover-inner-content')?.textContent).toBeFalsy();
+    expect(popup).toBe(null);
   });
 
   it('props#overlay do not warn anymore', () => {

components/popover/index.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
-import type { AbstractTooltipProps } from '../tooltip';
-import Tooltip from '../tooltip';
 import type { RenderFunction } from '../_util/getRenderPropValue';
 import { getRenderPropValue } from '../_util/getRenderPropValue';
 import { getTransitionName } from '../_util/motion';
+import { ConfigContext } from '../config-provider';
+import type { AbstractTooltipProps } from '../tooltip';
+import Tooltip from '../tooltip';
 import PurePanel from './PurePanel';
 // CSSINJS
 import useStyle from './style';
@@ -21,17 +21,12 @@ interface OverlayProps {
   content?: PopoverProps['content'];
 }
 
-const Overlay: React.FC<OverlayProps> = ({ title, content, prefixCls }) => {
+const Overlay: React.FC<OverlayProps> = ({ title, content, prefixCls }) => (
-  if (!title && !content) {
+  <>
-    return null;
+    {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
-  }
+    <div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
-  return (
+  </>
-    <>
+);
-      {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
-      <div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
-    </>
-  );
-};
 
 const Popover = React.forwardRef<unknown, PopoverProps>((props, ref) => {
   const {
@@ -65,7 +60,9 @@ const Popover = React.forwardRef<unknown, PopoverProps>((props, ref) => {
       prefixCls={prefixCls}
       overlayClassName={overlayCls}
       ref={ref}
-      overlay={<Overlay prefixCls={prefixCls} title={title} content={content} />}
+      overlay={
+        title || content ? <Overlay prefixCls={prefixCls} title={title} content={content} /> : null
+      }
       transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
       data-popover-inject
     />,