Skip to content

Fix unexpected closing of longer modal when clicking on scrollbar #2322

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

Merged
tlylt merged 5 commits into from
Jul 15, 2023
Merged

Fix unexpected closing of longer modal when clicking on scrollbar #2322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
61ff522
Fix modal scrollbar to modal body
WillCWX Jun 21, 2023
64127ba
Merge branch 'master' into 2013-fix-modal-scroll
WillCWX Jul 6, 2023
b2a6b1f
Update max height
WillCWX Jul 9, 2023
ab3c79b
Merge branch 'master' into 2013-fix-modal-scroll
tlylt Jul 15, 2023
0554a57
adjust styling and update test
tlylt Jul 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions packages/vue-components/src/Modal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
v-model="show"
ssr
:name="id"
classes="allow-overflow"
:content-class="['modal-dialog', optionalModalSize, optionalCentering]"
overlay-transition="none"
:transition="effectClass"
Expand All @@ -27,7 +26,7 @@
>
</button>
</div>
<div class="modal-body">
<div class="modal-body overflow-auto">
<slot></slot>
</div>
<div v-if="hasFooter || hasOk" class="modal-footer">
Expand Down Expand Up @@ -127,8 +126,13 @@ export default {
};
</script>
<style>
.allow-overflow {
overflow: auto;
.modal-dialog {
inset: 0;
position: absolute;
}

.modal-content {
max-height: 100%;
}

.modal-zoom {
Expand Down
4 changes: 2 additions & 2 deletions packages/vue-components/src/__tests__/Modal.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ describe('Modal', () => {
// click on trigger
await trigger.find('span.trigger-click').trigger('click');
// then click on backdrop
await wrapper.find('div.allow-overflow').trigger('click');
await wrapper.find('div[role=dialog]').trigger('click');

expect(wrapper.element).toMatchSnapshot();
});
Expand All @@ -109,7 +109,7 @@ describe('Modal', () => {
// click on trigger
await trigger.find('span.trigger-click').trigger('click');
// then click on backdrop
await wrapper.find('div.allow-overflow').trigger('click');
await wrapper.find('div[role=dialog]').trigger('click');

expect(wrapper.element).toMatchSnapshot();
});
Expand Down
40 changes: 20 additions & 20 deletions packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ exports[`Modal can be centered 1`] = `
<div
aria-expanded="false"
aria-modal="true"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
data-v-1cd72822=""
role="dialog"
style="display: none;"
Expand Down Expand Up @@ -57,7 +57,7 @@ exports[`Modal can be centered 1`] = `
</div>

<div
class="modal-body"
class="modal-body overflow-auto"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Expand Down Expand Up @@ -99,7 +99,7 @@ exports[`Modal can be large 1`] = `
<div
aria-expanded="false"
aria-modal="true"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
data-v-1cd72822=""
role="dialog"
style="display: none;"
Expand Down Expand Up @@ -129,7 +129,7 @@ exports[`Modal can be large 1`] = `
</div>

<div
class="modal-body"
class="modal-body overflow-auto"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Expand Down Expand Up @@ -171,7 +171,7 @@ exports[`Modal can be small 1`] = `
<div
aria-expanded="false"
aria-modal="true"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
data-v-1cd72822=""
role="dialog"
style="display: none;"
Expand Down Expand Up @@ -201,7 +201,7 @@ exports[`Modal can be small 1`] = `
</div>

<div
class="modal-body"
class="modal-body overflow-auto"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Expand Down Expand Up @@ -243,7 +243,7 @@ exports[`Modal should be closable by clicking the backdrop by default 1`] = `
<div
aria-expanded="false"
aria-modal="true"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
data-v-1cd72822=""
role="dialog"
style="display: none;"
Expand Down Expand Up @@ -273,7 +273,7 @@ exports[`Modal should be closable by clicking the backdrop by default 1`] = `
</div>

<div
class="modal-body"
class="modal-body overflow-auto"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Expand Down Expand Up @@ -315,7 +315,7 @@ exports[`Modal should be closable using the ok-text button 1`] = `
<div
aria-expanded="false"
aria-modal="true"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
data-v-1cd72822=""
role="dialog"
style="display: none;"
Expand All @@ -331,7 +331,7 @@ exports[`Modal should be closable using the ok-text button 1`] = `
<!---->

<div
class="modal-body"
class="modal-body overflow-auto"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Expand Down Expand Up @@ -383,7 +383,7 @@ exports[`Modal should not be closable by clicking the backdrop if backdrop is se
<div
aria-expanded="false"
aria-modal="true"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
data-v-1cd72822=""
role="dialog"
style="display: none;"
Expand Down Expand Up @@ -413,7 +413,7 @@ exports[`Modal should not be closable by clicking the backdrop if backdrop is se
</div>

<div
class="modal-body"
class="modal-body overflow-auto"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Expand Down Expand Up @@ -455,7 +455,7 @@ exports[`Modal should not show footer when no footer is given 1`] = `
<div
aria-expanded="false"
aria-modal="true"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
data-v-1cd72822=""
role="dialog"
style="display: none;"
Expand Down Expand Up @@ -485,7 +485,7 @@ exports[`Modal should not show footer when no footer is given 1`] = `
</div>

<div
class="modal-body"
class="modal-body overflow-auto"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Expand Down Expand Up @@ -527,7 +527,7 @@ exports[`Modal should not show header when no header is given 1`] = `
<div
aria-expanded="false"
aria-modal="true"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
data-v-1cd72822=""
role="dialog"
style="display: none;"
Expand All @@ -543,7 +543,7 @@ exports[`Modal should not show header when no header is given 1`] = `
<!---->

<div
class="modal-body"
class="modal-body overflow-auto"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Expand Down Expand Up @@ -589,7 +589,7 @@ exports[`Modal should show footer when both footer and ok-text are given 1`] = `
<div
aria-expanded="false"
aria-modal="true"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
data-v-1cd72822=""
role="dialog"
style="display: none;"
Expand All @@ -605,7 +605,7 @@ exports[`Modal should show footer when both footer and ok-text are given 1`] = `
<!---->

<div
class="modal-body"
class="modal-body overflow-auto"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Expand Down Expand Up @@ -649,7 +649,7 @@ exports[`Modal supports fade effect 1`] = `
<div
aria-expanded="false"
aria-modal="true"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
data-v-1cd72822=""
role="dialog"
style="display: none;"
Expand All @@ -665,7 +665,7 @@ exports[`Modal supports fade effect 1`] = `
<!---->

<div
class="modal-body"
class="modal-body overflow-auto"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Expand Down