Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

disable hide on outside click #161

Open
XxQuickSilverZz opened this issue Jun 18, 2024 · 4 comments
Open

disable hide on outside click #161

XxQuickSilverZz opened this issue Jun 18, 2024 · 4 comments

Comments

@XxQuickSilverZz
Copy link

Which property can I use to prevent the modal from hiding when I click outside of it? I don't want it to hide when clicking outside, only through code.

@supnate
Copy link
Collaborator

supnate commented Jun 19, 2024

It's handled by the UI library you use not Nice Modal. For example, set maskClosable=false in antd's modal. See API introduction here: https://ant.design/components/modal#api .

@XxQuickSilverZz
Copy link
Author

It's handled by the UI library you use not Nice Modal. For example, set maskClosable=false in antd's modal. See API introduction here: https://ant.design/components/modal#api .

i use this

`const modal = useModal();

let schema = yup.object({
  order_id: yup.string(),
  purposeTransfer: yup.string().required(),
  paymentDate: yup.date().required(),
});

const [amount, setAmount] = useState<string | undefined>(undefined);

let {
  data,
  error,
  loading: loadingNotPayedOrders,
} = useGetNotPayedOrdersQuery();

return (
  <Formik
    initialValues={{ paymentDate: new Date() } as AddOrderPaymentInput}
    validationSchema={schema}
    validateOnMount
    onSubmit={(erfuellungsort) => {
      console.log("NEW FORM -> ", erfuellungsort);
    }}
  >
    {({ isValid, values, errors, setFieldValue, touched }) => (
      <Modal
        TransitionComponent={Transition}
        fullWidth
        open={modal.visible}
        onClose={() => {
          modal.resolve({ resolved: false });
          modal.hide();
        }}
        TransitionProps={{
          onExited: () => {
            modal.resolve({ resolved: false });
            modal.remove();
          },
        }}
      >
        <DialogTitle id="alert-dialog-slide-title">
          Zahlungseingang verbuchen (VR-Werdenfels)
        </DialogTitle>
        <DialogContent>`

        how fix this?

@XxQuickSilverZz
Copy link
Author

XxQuickSilverZz commented Jul 2, 2024

@supnate please help

@mitchellgenova
Copy link

@XxQuickSilverZz That looks like a MUI modal to me. You can solve that by adding this to your onClose handler: https://stackoverflow.com/a/67745133.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants