Merge pull request #952 from ckeditor/t/951

Fix: `DomConverter` should actively prevent unwanted scrolling on focus. Closes #951. Closes #707. Closes #706.

Author: Reinmar

src/view/domconverter.js

@@ -18,6 +18,7 @@ import ViewDocumentFragment from './documentfragment';
 import ViewTreeWalker from './treewalker';
 import { BR_FILLER, INLINE_FILLER_LENGTH, isBlockFiller, isInlineFiller, startsWithFiller, getDataWithoutFiller } from './filler';
 
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import indexOf from '@ckeditor/ckeditor5-utils/src/dom/indexof';
 import getAncestors from '@ckeditor/ckeditor5-utils/src/dom/getancestors';
 import getCommonAncestor from '@ckeditor/ckeditor5-utils/src/dom/getcommonancestor';
@@ -734,7 +735,15 @@ export default class DomConverter {
 		const domEditable = this.getCorrespondingDomElement( viewEditable );
 
 		if ( domEditable && domEditable.ownerDocument.activeElement !== domEditable ) {
+			const { scrollX, scrollY } = global.window;
+			const { scrollLeft, scrollTop } = domEditable;
+
 			domEditable.focus();
+
+			// https://github.com/ckeditor/ckeditor5-engine/issues/951
+			domEditable.scrollLeft = scrollLeft;
+			domEditable.scrollTop = scrollTop;
+			global.window.scrollTo( scrollX, scrollY );
 		}
 	}
 

tests/view/domconverter/domconverter.js

@@ -10,6 +10,7 @@ import ViewEditable from '../../../src/view/editableelement';
 import ViewDocument from '../../../src/view/document';
 import { BR_FILLER, NBSP_FILLER } from '../../../src/view/filler';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
 testUtils.createSinonSandbox();
 
@@ -66,6 +67,32 @@ describe( 'DomConverter', () => {
 
 			expect( focusSpy.calledOnce ).to.be.true;
 		} );
+
+		// https://github.com/ckeditor/ckeditor5-engine/issues/951
+		it( 'should actively prevent window scroll in WebKit', () => {
+			const scrollToSpy = testUtils.sinon.stub( global.window, 'scrollTo' );
+			const scrollLeftSpy = sinon.spy();
+			const scrollTopSpy = sinon.spy();
+
+			Object.defineProperties( domEditable, {
+				scrollLeft: {
+					get: () => 20,
+					set: scrollLeftSpy
+				},
+				scrollTop: {
+					get: () => 200,
+					set: scrollTopSpy
+				}
+			} );
+
+			global.window.scrollX = 10;
+			global.window.scrollY = 100;
+
+			converter.focus( viewEditable );
+			sinon.assert.calledWithExactly( scrollToSpy, 10, 100 );
+			sinon.assert.calledWithExactly( scrollLeftSpy, 20 );
+			sinon.assert.calledWithExactly( scrollTopSpy, 200 );
+		} );
 	} );
 
 	describe( 'DOM nodes type checking', () => {