how to remove popover when I leave

Question

what i use:react 18,antd 5.12.8,typescript 5.0.2

what is my problem: I set Popover's trigger as hover,but when i input，moving the mouse to panel of choosing word ,it disappeard unexpectly reproduce:codesandbox

---

---

I tried to solev it by eventListener,but failed.

I expect when I hover to panel of choosing words,it won't disappear.and only disappear when I leave the popover

Answer 1

You do not have to use this much logic for the action you want to perform. Here is a simplified version of your code:

import React, { useState } from "react";
import "./index.css";
import { Button, Popover, Input } from "antd";

const App: React.FC = () => {

    const [open, setOpen] = useState(false);

    const handleOpen = (newOpen: boolean) => {
      setOpen(newOpen);
    };

  return (
    <div>
      <Popover
        placement="rightTop"
        trigger="hover"
        overlayInnerStyle={{
          width: 300,
        }}
        title={<Input.Search className="nav-search" allowClear={true} />}
        open={open}
        onOpenChange={handleOpen}
        content={<>content111</>}
      >
        <Button id="trigger">
          打开popover
        </Button>
      </Popover>
    </div>
  );
};

export default App;

In the code the onOpenChange prop uses the handleOpen function whenever the Popover is hovered as we have used a trigger of hover for it. Along with that the open prop value is set to the boolean open which is used along everytime we hover over the button.

Output :