antd preview closes popover

I use antd image inside antd popover and I open the preview of the image, then If I click on the preview or close the preview, this results in closing the popover as well, how can I prevent this?

I have tried

     <Popover
        destroyTooltipOnHide
        trigger="click"
        placement="bottomLeft"
        content={
          <div onClick={stopPropagation}>
            <Image
              src="/money.png"
              alt="search"
              onClick={stopPropagation}
              width={40}
              height={40}
              preview={{
                visible: isPreviewVisible,
                onVisibleChange: (visible) => {
                  setIsPreviewVisible(visible);
                },
              }}
            />
          </div>
        }
      >
        content
      </Popover>

but did not work

You can getContainer of Image preview to tell antd where to render the image preview.

Issue is that popover and image preview are rendered directly inside body tag and popover listen for event (i.e. trigger=click in your case). When you click on image preview since image preview is not rendered in popover content, Popover will detect the click happens outside the popover, it closes. But if you rendered it inside Popover content, it will not close the image preview. I created a ref and connect that with the div tag in Popover content and use that ref to tell antd to render Image preview in Popover content using getContainer.

Here's the complete code

import { Image, Popover } from 'antd';
import { useRef, useState } from 'react';

const App = () => {
    const contentRef = useRef(null);
    const [isPreviewVisible, setIsPreviewVisible] = useState(false);

    return (
        <Popover
            destroyTooltipOnHide
            trigger='click'
            placement='bottomLeft'
            content={
                <div ref={contentRef}>
                    <Image
                        src='/money.png'
                        alt='search'
                        width={40}
                        height={40}
                        preview={{
                            getContainer: () => contentRef.current,
                            visible: isPreviewVisible,
                            onVisibleChange: (visible) => {
                                setIsPreviewVisible(visible);
                            }
                        }}
                    />
                </div>
            }
        >
            content
        </Popover>
    );
};

export default App;