Dropdown scroll within a popover closes popover

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Scrolling dropdown with the scrollbar inside a popover closes the popover. Scrolling with a wheel/trackpad works.

const App = () => {
  const [visible, setVisible] = useState(false);

  const handleVisibleChange = (visible) => {
    setVisible(visible);
  };

  return (
    <Popover
      content={
        <div>
          <Select style={{ width: 300 }}>
            {new Array(30).fill({}).map((_, i) => (
              <Select.Option key={i}>{i}</Select.Option>
            ))}
          </Select>
        </div>
      }
      title="Title"
      trigger="click"
      visible={visible}
      onVisibleChange={handleVisibleChange}
    >
      <Button type="primary">Click me</Button>
    </Popover>
  );
};

https://user-images.githubusercontent.com/51488/114467391-b6444e80-9b9e-11eb-9014-0281e50cfc93.mp4

What is expected?

To have both popover and dropdown stay open.

What is actually happening?

Popoever closes and then the dropdown closes.

Environment	Info
antd	4.15.1
React	16.14.0
System	OS X
Browser	Chrome 89

[zombieJ]

@elado, Fixed. Pls check: https://codesandbox.io/s/controlling-the-close-of-the-dialog-antd4151-forked-vcoe4?file=/index.js

[elado]

@afc163

This is an old bug that has been fixed since v3.11.x. If you’re using an older version, you can use <Select getPopupContainer={trigger => trigger.parentElement}> to render a component inside Popover. (Or other getXxxxContainer props)

Thanks. Looks like this bug still exists in 4.15.1 (see codesandbox link). The getPopupContainer works though.