The 'popupVisible' not work

[TaurusWood]

I use 'popupVisible' and 'onPopupVisibleChange' with React.useState，but popup won't close once opened

import React, { useState } from "react";
import "antd/dist/antd.css";

import Trigger from "rc-trigger";
import { List, Button } from "antd";

import "./index.css";

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

  console.log(`visible`, visible)

  return (
    <div className="wrapper">
      <Trigger
        popupVisible={visible}
        action={["click"]}
        // destroyPopupOnHide={true}
        popup={<span>popup</span>}
        popupAlign={{
          points: ['tl', 'tr'],
          // offset: [0, 3]
        }}
        onPopupVisibleChange={(a) => {
          console.log('a', a)
          setVisible(a);
        }}
      >
        <Button block >+++</Button>
      </Trigger>
    </div>
  );
};

export default App;

[Cuiyansong]

Maybe the real reason is Do not call Hooks in class components. and rc-trigger is class component. https://reactjs.org/warnings/invalid-hook-call-warning.html#breaking-the-rules-of-hooks

[molnarlaura]

+1 the click event is not propagated to the child components if the trigger action is set to click: CodeSandbox-Example

[shaunhurryup]

I add prop destroyTooltipOnHide={true} on another lib named rc-tooltip, and it can close finally.

In this lib, the prop named destroyPopupOnHide

[SSSliangfeng]

+1 I come across same bug after upgrade react from 16 to 18 , the rc-trigger can't close popup after the popupVisible is false. @zombieJ

<Trigger action={!disabled ? ['click'] : []} prefixCls={prefix} popup={<Popup {...props} onCancel={handleCancel} onConfirm={handleConfirm} />} popupVisible={disabled ? false : popupVisible} onPopupVisibleChange={setPopupVisible} popupStyle={{ position: 'absolute', zIndex: 1050 }} builtinPlacements={BUILT_IN_PLACEMENTS} popupPlacement="bottomLeft" popupTransitionName={popupTransitionName} getPopupContainer={getPopupContainer || getContextPopupContainer} > <Selector forwardRef={selectorRef} onRemove={handleItemRemove} onClear={handleClear} {...props} /> </Trigger>