Merge pull request #17299 from ckeditor/ck/17298

oleq · web-flow · commit 90a133fb39c6 · 2024-10-22T15:45:14.000+02:00
Internal (ui): Moved the document scroll lock for modal windows from `<body>` to `<html>` to make it bulletproof. Closes #17298.
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dialog/dialog.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dialog/dialog.css
@@ -39,7 +39,7 @@
 	}
 }
 
-.ck-dialog-body-scroll-locked {
+.ck-dialog-scroll-locked {
 	overflow: hidden;
 }
 
diff --git a/packages/ckeditor5-ui/src/dialog/dialog.ts b/packages/ckeditor5-ui/src/dialog/dialog.ts
@@ -390,14 +390,14 @@ export default class Dialog extends Plugin {
 	 * Makes the <body> unscrollable (e.g. when the modal shows up).
 	 */
 	private _lockBodyScroll(): void {
-		document.body.classList.add( 'ck-dialog-body-scroll-locked' );
+		document.documentElement.classList.add( 'ck-dialog-scroll-locked' );
 	}
 
 	/**
 	 * Makes the <body> scrollable again (e.g. once the modal hides).
 	 */
 	private _unlockBodyScroll(): void {
-		document.body.classList.remove( 'ck-dialog-body-scroll-locked' );
+		document.documentElement.classList.remove( 'ck-dialog-scroll-locked' );
 	}
 }
 
diff --git a/packages/ckeditor5-ui/tests/dialog/dialog.js b/packages/ckeditor5-ui/tests/dialog/dialog.js
@@ -266,11 +266,11 @@ describe( 'Dialog', () => {
 				className: 'foo'
 			} );
 
-			expect( document.body.classList.contains( 'ck-dialog-body-scroll-locked' ) ).to.be.true;
+			expect( document.documentElement.classList.contains( 'ck-dialog-scroll-locked' ) ).to.be.true;
 
 			dialogPlugin.destroy();
 
-			expect( document.body.classList.contains( 'ck-dialog-body-scroll-locked' ) ).to.be.false;
+			expect( document.documentElement.classList.contains( 'ck-dialog-scroll-locked' ) ).to.be.false;
 		} );
 	} );
 
@@ -448,26 +448,26 @@ describe( 'Dialog', () => {
 		} );
 
 		it( 'should lock document scroll if the dialog is a modal', () => {
-			expect( document.body.classList.contains( 'ck-dialog-body-scroll-locked' ) ).to.be.false;
+			expect( document.documentElement.classList.contains( 'ck-dialog-scroll-locked' ) ).to.be.false;
 
 			dialogPlugin._show( {
 				position: DialogViewPosition.EDITOR_CENTER,
 				isModal: true,
 				className: 'foo'
 			} );
 
-			expect( document.body.classList.contains( 'ck-dialog-body-scroll-locked' ) ).to.be.true;
+			expect( document.documentElement.classList.contains( 'ck-dialog-scroll-locked' ) ).to.be.true;
 		} );
 
 		it( 'should not lock document scroll if the dialog is not a modal', () => {
-			expect( document.body.classList.contains( 'ck-dialog-body-scroll-locked' ) ).to.be.false;
+			expect( document.documentElement.classList.contains( 'ck-dialog-scroll-locked' ) ).to.be.false;
 
 			dialogPlugin._show( {
 				position: DialogViewPosition.EDITOR_CENTER,
 				className: 'foo'
 			} );
 
-			expect( document.body.classList.contains( 'ck-dialog-body-scroll-locked' ) ).to.be.false;
+			expect( document.documentElement.classList.contains( 'ck-dialog-scroll-locked' ) ).to.be.false;
 		} );
 	} );
 
@@ -541,19 +541,19 @@ describe( 'Dialog', () => {
 		} );
 
 		it( 'should unlock document scroll if the dialog is a modal', () => {
-			expect( document.body.classList.contains( 'ck-dialog-body-scroll-locked' ) ).to.be.false;
+			expect( document.documentElement.classList.contains( 'ck-dialog-scroll-locked' ) ).to.be.false;
 
 			dialogPlugin._show( {
 				position: DialogViewPosition.EDITOR_CENTER,
 				isModal: true,
 				className: 'foo'
 			} );
 
-			expect( document.body.classList.contains( 'ck-dialog-body-scroll-locked' ) ).to.be.true;
+			expect( document.documentElement.classList.contains( 'ck-dialog-scroll-locked' ) ).to.be.true;
 
 			dialogPlugin._hide();
 
-			expect( document.body.classList.contains( 'ck-dialog-body-scroll-locked' ) ).to.be.false;
+			expect( document.documentElement.classList.contains( 'ck-dialog-scroll-locked' ) ).to.be.false;
 		} );
 	} );
 } );

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@`
`39`	`39`	`}`
`40`	`40`	`}`
`41`	`41`
`42`		`-.ck-dialog-body-scroll-locked {`
	`42`	`+.ck-dialog-scroll-locked {`
`43`	`43`	`overflow: hidden;`
`44`	`44`	`}`
`45`	`45`
Original file line number	Diff line number	Diff line change
`@@ -390,14 +390,14 @@ export default class Dialog extends Plugin {`
`390`	`390`	`* Makes the <body> unscrollable (e.g. when the modal shows up).`
`391`	`391`	`*/`
`392`	`392`	`private _lockBodyScroll(): void {`
`393`		`- document.body.classList.add( 'ck-dialog-body-scroll-locked' );`
	`393`	`+ document.documentElement.classList.add( 'ck-dialog-scroll-locked' );`
`394`	`394`	`}`
`395`	`395`
`396`	`396`	`/**`
`397`	`397`	`* Makes the <body> scrollable again (e.g. once the modal hides).`
`398`	`398`	`*/`
`399`	`399`	`private _unlockBodyScroll(): void {`
`400`		`- document.body.classList.remove( 'ck-dialog-body-scroll-locked' );`
	`400`	`+ document.documentElement.classList.remove( 'ck-dialog-scroll-locked' );`
`401`	`401`	`}`
`402`	`402`	`}`
`403`	`403`