Encountered a similar problem and resolved it by including

onClick={(e) => e?.stopPropagation()}

in the element that should prevent closing the overlay when clicked

For AntDesign version 5+

To maintain the dropdown open even when a menu item is clicked, you can use a boolean state and handle specific events. In this example, I demonstrate how to keep the dropdown open for certain menu item keys while allowing it to close for others. For instance, only the menu item with the key menuItemKeyWhichShouldNotClose will not close the dropdown upon selection.

      <Dropdown
        open={open}
        menu={{
          items,
          onClick: (info: MenuInfo): void => {
            if (info.key !== menuItemKeyWhichShouldNotClose) setOpen(false)
          },
          onMouseLeave: (): void => setOpen(false),
        }}
      >
        <Button onMouseEnter={(): void => setOpen(true)}>
          <AiOutlineEllipsis />
        </Button>
      </Dropdown>

To achieve this, consider making a modification to the Input Search feature.

<Input.Search
          onChange={(e) => {
         
            if (e.target.value.length) {

              this.setState({ visible: true });
              return false;
            }
            this.setState({ visible: false });
          }}
        ></Input.Search>

Additionally, delete the usage of setstate from the function handleVisibleChange

  handleVisibleChange = (flag) => {
 
  };

If you are looking to resolve the problem, one solution is to add the attribute disabled to the Item element in this manner:

<Menu.Item key="1" disabled>Clicking me will not close the menu.</Menu.Item>

Ensure to include an additional state for storing input values.

 state = {
    visible: false,
    value: ''
  };

Assign the input value to the state when the user types the value in the input field

<Input.Search
   onInput={() => {
     this.setState({ visible: true });
   }}
   onChange={e => this.setState({value: e.target.value})}
   />

Adjust the visibility of the dropdown based on the length of the entered value.

  handleVisibleChange = (flag) => {
    if(this.state.value.length <= 0)
     this.setState({ visible: false });
    else
     this.setState({ visible: flag });
  };

Complete code example:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Menu, Dropdown, Input } from "antd";

class OverlayVisible extends React.Component {
  state = {
    visible: false,
    value: ''
  };

  handleMenuClick = (e) => {
    if (e.key === "3") {
      this.setState({ visible: false });
    }
  };

  handleVisibleChange = (flag) => {
    if(this.state.value.length<=0)
    this.setState({ visible: false });
    else
    this.setState({ visible: flag });
  };

  render() {
    const menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
      </Menu>
    );
    return (
      <Dropdown
        onClick={() => {
          this.setState({ visible: true });
        }}
        overlay={menu}
        onVisibleChange={this.handleVisibleChange}
        visible={this.state.visible}
        trigger={["click"]}
      >
        <Input.Search
          onInput={() => {
            this.setState({ visible: true });
          }}
          onChange={e => this.setState({value: e.target.value})}
        ></Input.Search>
        {/* <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
          Hover me <Icon type="down" />
        </a> */}
      </Dropdown>
    );
  }
}

ReactDOM.render(<OverlayVisible />, document.getElementById("container"));

Adding my personal experience to @raqibrasheed 786's solution. I encountered a similar issue with controlling the open status of a dropdown menu while attempting to create a multiselect feature with checkbox items.

type MultiSelectProps = {
  options: Array<{ value: string, label: string }>;
} & Partial<DropdownProps>;

export const MultiSelect: React.FC<MultiSelectProps> = ({
  options,
}) => {
  const handleOnClickOption = (e: any, val: string) => {
    // This is crucial to prevent event propagation and keep the menu open.
    e.stopPropagation();
    // Define the action for clicking each menu item.
  };

  const ignoreHandler = (e: any) => e.preventDefault();

  const menu = (<Menu
    items={options?.map(option => ({
      key: option.value,
      label:
        <div
          role="button"
          onClick={(e) => handleOnClickOption(e, option.value)}
        >
          {/* Your component to render the menu item, ignoring click events from children */}
          <Checkbox
            checked={!!Math.floor(Math.random() + 1)}
            onClick={ignoreHandler}
          />
        </div>
    }))}
  />);

  return (
    <Dropdown
      className=""
      overlay={menu}
      trigger={["click"]}
    >
      {/* Render something based on current status */}
    </Dropdown>
  );
};

The main takeaways:

• Avoid triggering child items
• Prevent propagation within the menu item wrapper

This approach helps maintain the menu open with a single click event.

If you want to take control of the dropdown yourself using the open state, here are some example codes for you:

const [open, setOpen] = useState<boolean>(true);
<Dropdown menu={{ items }} 
   open={open} 
   onOpenChange={(open) => {
     // manage the open state according to your needs
     // if you prefer to keep the dropdown open, simply do nothing and it will stay open 
    }}>
    <a onClick={(e) => e.preventDefault()}>
      <Space>
        Cascading menu
        <DownOutlined />
      </Space>
    </a>
  </Dropdown>

You can also refer to this sandbox example

If you're looking for a solution, consider trying the following approach:

• Implement custom isOpen and setIsOpen functions.
• Create a wrapper with a container that has an ID, like <div id={dropDownId} />, and attach an onClick event to it.
• Set the prop getPopupContainer to bind the container as mentioned above.

This way, the <Dropdown /> component will always stay within the container.

import "./styles.css";
import { Button, Dropdown } from "antd";
import { useState } from "react";

export default function App() {
  const [isOpen, setOpen] = useState(false);

  const items = [
    {
      key: "1",
      label: "1",
      show: true,
    },
    {
      key: "2",
      label: "2",
      show: true,
    },
    {
      key: "3",
      label: "3",
      show: true,
    },
    {
      key: "4",
      label: "4",
      show: true,
    },
  ];

  const defaultSelectedKeys = items
    .filter((item) => item.show)
    .map((item) => item.key);

  const dropDownId = "drop-down-id";

  return (
    <div className="App">
      <div id={dropDownId} onClick={() => setOpen(!isOpen)}>
        <Dropdown
          open={isOpen}
          menu={{
            getPopupContainer: () => 
 document.getElementById(dropDownId) as HTMLDivElement,
            selectable: true,
            multiple: true,
            onClick: ({ domEvent }) => {
              domEvent.stopPropagation();
            },
            items, // ...
            defaultSelectedKeys, // ...
          }}
        >
          <Button type="primary">show buttons</Button>
        </Dropdown>
      </div>
    </div>
  );
}

Check out the sandbox example demo