From d9aeaec5e787fb407f017196bd28f8eb1817ebfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Mon, 18 Sep 2023 12:14:52 +0300 Subject: [PATCH] Fixed #4463 - Dialog: new blockScroll property --- api-generator/components/dialog.js | 6 ++++++ components/lib/dialog/BaseDialog.vue | 4 ++++ components/lib/dialog/Dialog.d.ts | 5 +++++ components/lib/dialog/Dialog.vue | 4 ++-- 4 files changed, 17 insertions(+), 2 deletions(-) diff --git a/api-generator/components/dialog.js b/api-generator/components/dialog.js index 1810934cf..96efd0501 100644 --- a/api-generator/components/dialog.js +++ b/api-generator/components/dialog.js @@ -71,6 +71,12 @@ const DialogProps = [ default: 'true', description: 'Whether to show the header or not.' }, + { + name: 'blockScroll', + type: 'boolean', + default: 'false', + description: 'Whether background scroll should be blocked when dialog is visible.' + }, { name: 'baseZIndex', type: 'number', diff --git a/components/lib/dialog/BaseDialog.vue b/components/lib/dialog/BaseDialog.vue index c6b977115..706b126f3 100644 --- a/components/lib/dialog/BaseDialog.vue +++ b/components/lib/dialog/BaseDialog.vue @@ -247,6 +247,10 @@ export default { type: Boolean, default: true }, + blockScroll: { + type: Boolean, + default: false + }, baseZIndex: { type: Number, default: 0 diff --git a/components/lib/dialog/Dialog.d.ts b/components/lib/dialog/Dialog.d.ts index 99bbbbfcd..98190f8aa 100755 --- a/components/lib/dialog/Dialog.d.ts +++ b/components/lib/dialog/Dialog.d.ts @@ -202,6 +202,11 @@ export interface DialogProps { * @defaultValue true */ showHeader?: boolean | undefined; + /** + * Whether background scroll should be blocked when dialog is visible. + * @defaultValue false + */ + blockScroll?: boolean | undefined; /** * Base zIndex value to use in layering. * @defaultValue 0 diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue index 7c0b19faa..e31f85313 100755 --- a/components/lib/dialog/Dialog.vue +++ b/components/lib/dialog/Dialog.vue @@ -208,12 +208,12 @@ export default { } }, enableDocumentSettings() { - if (this.modal || (this.maximizable && this.maximized)) { + if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) { DomHandler.addClass(document.body, 'p-overflow-hidden'); } }, unbindDocumentState() { - if (this.modal || (this.maximizable && this.maximized)) { + if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) { DomHandler.removeClass(document.body, 'p-overflow-hidden'); } },