How to make the modal overflow on vfm--fixed element correctly?

[johnson0903]

Version

vue-final-modal: 4.0.7
vue: 3.2.37

Reproduction Link

https://codesandbox.io/p/sandbox/vue-final-modal-scroll-9vkef0

What is Expected?

I want to make the modal content scrollable and the scrollbar should appear on vfm--fixed element, such as Bootstrap Scrolling long content Modal Example.

What is actually happening?

I add overflow-y: auto on vfm--fixed element to make the scrollbar appear on the right side , but it caused 2 problems.
First, the overlay height is not equal to the long content. Maybe can make it appear outside the vfm container to solve this problem.

Second, when release the mouse after drag or click on the scroll bar, the modal was closed.

Any suggestion will be helpful !

[hunterliu1003]

@johnson0903

I implemented an long content scroll modal example like bootstrap:
https://codesandbox.io/p/sandbox/vue-final-modal-scroll-forked-totdfc

[johnson0903]

@johnson0903

I implemented an long content scroll modal example like bootstrap: https://codesandbox.io/p/sandbox/vue-final-modal-scroll-forked-totdfc

Thank you! Would you add this example to the documentaion?

[hunterliu1003]

Yeah I'll consider to add a new use case inside of https://vue-final-modal.org/use-cases/playground/.

[hunterliu1003]

The example was added to the use-cases page:
https://vue-final-modal.org/use-cases/modal-long-scroll

[johnson0903]

Hi Hunter,

Thank you for your previous update. I have another question related to user experience.

I noticed that in the example you updated, if the mouse is clicked inside the modal and then dragged to the gray background before being released, the modal will be closed.

However, it seems that the original VueFinalModal component handles this issue to prevent the modal from being closed. Is there a way to avoid this situation in this example as well?

[hunterliu1003]

@johnson0903 Thanks for your feedback.
Here is the issue: #352

[hunterliu1003]

@johnson0903 The issue was fixed in version v4.1.3

[johnson0903]

@hunterliu1003
Thank you for fixing the issue of the screen jumping when opening the modal.
However, the question I originally wanted to ask was how to prevent the modal from closing when I drag the mouse from inside the modal to outside and release the mouse, which only happens in the Modal Long Scroll example. Currently it still happen in the example.

I am wondering if it's because the click.self directive written in the following code block of the example is causing the issue:
<div class="absolute inset-0 h-full overflow-auto" @click.self="() => emit('update:modelValue', false)">
In the Modal Long Scroll example, this directive is used to listen for clicks outside of the modal.