Close trigger on `button click`

[kevalsavani]

How can I close the trigger popup on the external click, there is a use-case in code Here is the code.

<Trigger
  action={["click"]}
  popup={
    <div>
      <p>This is a sample code</p>
      <p>
        <button
          onClick={() => {
            // Code to close the trigger on button click
          }}
        >
          Close trigger
        </button>
      </p>
    </div>
  }
  popupAlign={{
    points: ["tl", "cr"],
    offset: [10, 10],
    overflow: {
      adjustX: 1,
      adjustY: 1,
    },
  }}
>
  Show Trigger
</Trigger>;

[Don-ixu]

I have the same problem, do you know how to solve it?

[kevalsavani]

I tried couple of ways but did not found any particular solution.

[kevalsavani]

@Don-ixu I have found a way to show and hide the popup, use props popupVisible as boolean.

However I still don't see any props to close the modal when user clicks outside of the popup, tho I have used third party package but if we get that in-build it will be easy for us.

[cybercarrot]

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

<Trigger
  action={["click"]}
  popup={
    <div>
      <p>This is a sample code</p>
      <p>
        <button
          onClick={() => {
            // Code to close the trigger on button click
          }}
        >
          Close trigger
        </button>
      </p>
    </div>
  }
  popupAlign={{
    points: ["tl", "cr"],
    offset: [10, 10],
    overflow: {
      adjustX: 1,
      adjustY: 1,
    },
  }}
 popupVisible={visible}
 onPopupVisibleChange={(a) => {
   setVisible(a);
 }}
>
  Show Trigger
</Trigger>;

this works，but should pass setVisible(false) to popup inside, wonder a better solution