Longer Modal closes unexpectedly when interacting with the scrollbar

[tlylt]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

#1909

Tell us about your environment

Windows 10

MarkBind version

4.0.0

What did you do? Describe the bug

After the dual-modal issue is fixed, there's another problem of auto closing modal after an interaction with the scrollbar. This is less obvious as users can scroll via the mouse scroll wheel, which works fine.

Steps to reproduce

• Open a modal with content longer than a page, which will render the scroll bar
• Click or drag the scrollbar
• See that the modal auto closes

Examples described below,

Expected behavior

Seeing from one of the previous deployment previews, users can use the scrollbar
https://deploy-preview-1795--markbind-master.netlify.app/userguide/syntaxcheatsheet

Actual behavior

https://deploy-preview-2012--markbind-master.netlify.app/userguide/syntaxcheatsheet
Modal auto closes once user releases his/her click on the scrollbar

the

Anything else?

No response

[jonahtanjz]

Looks like this is related to vue-final-modal's click-to-close feature. Somehow the overlay extends over the scroll bar which triggers the above function when it is clicked.

[domlimm]

Hello guys! If no one's picking this up, I'd love to try and explore on this 👍🏻

[WillCWX]

hello @domlimm , are you still working on this issue?

[domlimm]

@WillCWX hey! Thanks for checking! Sorry I'm not, please go ahead thanks!

[WillCWX]

@WillCWX hey! Thanks for checking! Sorry I'm not, please go ahead thanks!

Ok, thanks for the quick reply!

Hello @tlylt , can I be assigned this issue? Or would it be better to wait for vue3 migration?

[tlylt]

@WillCWX hey! Thanks for checking! Sorry I'm not, please go ahead thanks!

Ok, thanks for the quick reply!

Hello @tlylt , can I be assigned this issue? Or would it be better to wait for vue3 migration?

sorry for the late reply, it doesn't have to wait for vue3 migration.

[WillCWX]

Looks like this is related to vue-final-modal's click-to-close feature. Somehow the overlay extends over the scroll bar which triggers the above function when it is clicked.

Sort of, the way the click-to-close works is that any pointer event in the modal container closes the entire modal. This includes the scroll bar as the allow-overflow css class is applied to the modal container. To prevent the modal from closing when clicking on the content, the .modal-dialog css class found in the modal content contains pointers-event:none.

I think we can just move the scrollbar / allow-overflow css class to the modal content, which will also fix the side note of #1916 as the scroll bar will no longer move to the side.

the white bar is from snip and not from the website

link to vfm vue2 documentation

Would this be ok?

[yucheng11122017]

I think we can just move the scrollbar / allow-overflow css class to the modal content, which will also fix the side note of #1916 as the scroll bar will no longer move to the side. the white bar is from snip and not from the website

link to vfm vue2 documentation

Would this be ok?

Hi @WillCWX, I think that sounds good! It looks good as well
Could you try it and see if it works? On my end, from some preliminary checking this seems to disable the scrolling. But please do try :)

[WillCWX]

Hi @WillCWX, I think that sounds good! It looks good as well Could you try it and see if it works? On my end, from some preliminary checking this seems to disable the scrolling. But please do try :)

I confused myself and forgot that the scrolling should be added to our div class="modal-content" instead.
A limit to the max-height of our div class="modal-content" is needed as it is allowed to have an infinite max-height and thus goes beyond the webpage and disables scrolling.

I will open the PR so you can take a look if you want to. (I set max-height=90vh as it looks best to me)