Skip to content

Close trigger on button click #303

Description

@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>;

Activity

  1. Don-ixu commented on Jul 16, 2022

    @Don-ixu

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

  2. kevalsavani commented on Jul 17, 2022

    @kevalsavani
    Author

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

  3. kevalsavani commented on Jul 18, 2022

    @kevalsavani
    Author

    @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.

  4. cybercarrot commented on Jul 19, 2022

    @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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions