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.

Sign up for GitHub

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

Jump to bottom

How am I supposed to prevent a modal from being closed? #367

Closed
Twanghofer opened this issue May 15, 2023 · 5 comments · Fixed by #402
Closed

How am I supposed to prevent a modal from being closed? #367

Twanghofer opened this issue May 15, 2023 · 5 comments · Fixed by #402
Assignees
@hunterliu1003
Labels
enhancement New feature or request question Further information is requested

Comments

@Twanghofer
Copy link

Since the Migration from v3 to v4, I am not sure how to do this. The migration guide suggests, that 'It's easy to have a condition before open or before close the modal', but this won't work when using escToClose or clickToClose.

How can I prevent a Modal from being closed with escToClose or clickToClose?
@Twanghofer Twanghofer added the question Further information is requested label May 15, 2023
@Me-Phew
Copy link

Me-Phew commented Jun 21, 2023

I'm pretty sure you can just set the escToClose and clickToClose props to false.

@jcmillett
Copy link

I'm also running into this issue. I want to allow click outside or escape key to close the dialog, but I want to run some logic first to verify it's what the user wants to do. Is this not possible?

@Twanghofer
Copy link
Author

I'm also running into this issue. I want to allow click outside or escape key to close the dialog, but I want to run some logic first to verify it's what the user wants to do. Is this not possible?

For the project in question I just stayed with v3, cause I didn't find a good solution yet

@hunterliu1003
Copy link
Member

hunterliu1003 commented Nov 14, 2023 •
edited

@Twanghofer
Indeed.
When I rewrote v4, I did not consider this because I did not encounter this requirement in my experience. However, I agree with the situation you mentioned about escToClose and clickToClose. I will try to add the event.stop() function to v4, but I can't give you a guaranteed time yet.

I don't want vfm users to be stuck in v3 because of this situation. I'm sorry for the delay in replying to you.

@hunterliu1003 hunterliu1003 added the enhancement New feature or request label Nov 14, 2023
hunterliu1003 added a commit that referenced this issue Nov 14, 2023
@hunterliu1003
feat: add stop() for @beforeOpen and beforeClose event #367
6bdbe83
@hunterliu1003 hunterliu1003 mentioned this issue Nov 14, 2023
Merged
hunterliu1003 added a commit that referenced this issue Nov 30, 2023
@hunterliu1003
feat: add stop() for @beforeOpen and beforeClose event #367
bbd4786
hunterliu1003 added a commit that referenced this issue Dec 7, 2023
@hunterliu1003
Merge pull request #402 from vue-final/feat/367
dd595ed 
feat: add `stop()` for `@beforeOpen` and `beforeClose` event #367
hunterliu1003 added a commit that referenced this issue Dec 7, 2023
@hunterliu1003 @AdamMerrifield @Mini-ghost
Feat/4.5 (#413)
73255d0 
* rename module extension to mjs

* chore: update lock file

* fix: fixed generic component type in useModal composable

* docs: update type

* chore: bump deps

* fix: bump deps

* chore: update example/nuxt3

* docs: #385

* fix: #390

* chore: use vite-plugin-dts to build lib

* feat: add `stop()` for `@beforeOpen` and `beforeClose` event #367

* refactor: move watch modelValueLocal into setModelValueLocal

* fix: setModelValueLocal and add StopEvent example

* perf: use getter and setter instead of `computed` for `modelValueLocal`

* docs: add event.stop() back

* refactor: delete CoreModal, this will also fixed #362

* refactor: improve type, lint, cleanup

* feat: add overlayBehavior prop to VueFinalModal #405

* refactor: rename type Modal to ModalExposed

* chore: fix nestedModal viteplay example

* fix: overlayBehavior

* feat: add close function to defineSlots

* docs: scoped slots close

* chore: reduce bundle size a bit

---------

Co-authored-by: AdamMerrifield <adam.merrifield@gmail.com>
Co-authored-by: Alex Liu <dsa1314@gmail.com>
@hunterliu1003
Copy link
Member

The v4.5.0 is released
Now you can use @beforeOpen="(event) => event.stop()" or @beforeClose="(event) => event.stop()" to prevent the open or close modal.
Checkout: https://vue-final-modal.org/api/components/vue-final-modal#events

@hunterliu1003 hunterliu1003 mentioned this issue Dec 7, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@hunterliu1003 hunterliu1003

Labels
enhancement New feature or request question Further information is requested
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: add stop() for @beforeOpen and beforeClose event #367 vue-final/vue-final-modal
4 participants
@jcmillett @hunterliu1003 @Twanghofer @Me-Phew