Browse Source

Merge pull request #771 from ckeditor/t/770

EditableElement.isFocus is set before actual rendering.
Piotrek Koszuliński 9 years ago
parent
commit
5a277a67b7

+ 3 - 3
packages/ckeditor5-engine/src/view/editableelement.js

@@ -80,11 +80,11 @@ export default class EditableElement extends ContainerElement {
 			( isFocused ) => isFocused && document.selection.editableElement == this
 		);
 
-		// Update focus state after each rendering. Selection might be moved to different editable before rendering,
-		// but this does not mean that editable has focus - it will be placed there after rendering.
+		// Update focus state before each rendering. Rendering should not change neither the selection nor the value of
+		// document.isFocused property.
 		this.listenTo( document, 'render', () => {
 			this.isFocused = document.isFocused && document.selection.editableElement == this;
-		}, { priority: 'low' } );
+		}, { priority: 'high' } );
 	}
 }
 

+ 22 - 0
packages/ckeditor5-engine/tests/view/editableelement.js

@@ -91,6 +91,28 @@ describe( 'EditableElement', () => {
 			expect( viewHeader.isFocused ).to.be.true;
 		} );
 
+		it( 'should change isFocus before actual rendering', ( done ) => {
+			const rangeMain = Range.createFromParentsAndOffsets( viewMain, 0, viewMain, 0 );
+			const rangeHeader = Range.createFromParentsAndOffsets( viewHeader, 0, viewHeader, 0 );
+			docMock.render = sinon.spy();
+
+			docMock.selection.addRange( rangeMain );
+			docMock.isFocused = true;
+
+			expect( viewMain.isFocused ).to.be.true;
+			expect( viewHeader.isFocused ).to.be.false;
+
+			docMock.selection.setRanges( [ rangeHeader ] );
+
+			viewHeader.on( 'change:isFocused', ( evt, propertyName, value ) => {
+				expect( value ).to.be.true;
+				sinon.assert.notCalled( docMock.render );
+				done();
+			} );
+
+			docMock.fire( 'render' );
+		} );
+
 		it( 'should change isFocused when document.isFocus changes', () => {
 			const rangeMain = Range.createFromParentsAndOffsets( viewMain, 0, viewMain, 0 );
 			const rangeHeader = Range.createFromParentsAndOffsets( viewHeader, 0, viewHeader, 0 );

+ 5 - 4
packages/ckeditor5-engine/tests/view/manual/focusobserver.js

@@ -10,8 +10,8 @@ import { setData } from '../../../src/dev-utils/view';
 
 const viewDocument = new Document();
 
-viewDocument.on( 'focus', ( evt, data ) => console.log( 'event:focus', data.domTarget ) );
-viewDocument.on( 'blur', ( evt, data ) => console.log( 'event:blur', data.domTarget ) );
+viewDocument.on( 'focus', ( evt, data ) => console.log( `Focus in ${ data.domTarget.id }.` ) );
+viewDocument.on( 'blur', ( evt, data ) => console.log( `Blur in ${ data.domTarget.id }.` ) );
 
 const domEditable1 = document.getElementById( 'editable1' );
 const domEditable2 = document.getElementById( 'editable2' );
@@ -21,12 +21,13 @@ const editable2 = viewDocument.createRoot( domEditable2, 'editable2' );
 
 viewDocument.on( 'selectionChange', ( evt, data ) => {
 	viewDocument.selection.setTo( data.newSelection );
+	viewDocument.render();
 } );
 
-setData( viewDocument, '<p>First editable.</p>', { rootName: 'editable1' } );
+setData( viewDocument, '<p>{}First editable.</p>', { rootName: 'editable1' } );
 setData( viewDocument, '<p>Second editable.</p>', { rootName: 'editable2' } );
 
 editable1.on( 'change:isFocused', () => domEditable1.style.backgroundColor = editable1.isFocused ? 'green' : 'red' );
 editable2.on( 'change:isFocused', () => domEditable2.style.backgroundColor = editable2.isFocused ? 'green' : 'red' );
 
-viewDocument.render();
+viewDocument.focus();

+ 7 - 2
packages/ckeditor5-engine/tests/view/manual/focusobserver.md

@@ -1,9 +1,14 @@
 Focused editable should be green.
 Blurred editable should be red.
 
+* Selection should be placed in 1st editable
 * Open console.
-* Focus the first editable.
-  * Focus in the 1st editable should be logged.
+* Focus in the 1st editable should be logged.
 * Focus the second editable.
   * Blur in the 1st editable should be logged.
   * Focus in the 2nd editable should be logged.
+* Focus the first editable.
+  * Blur in the 2nd editable should be logged.
+  * Focus in the 1st editable should be logged.
+* Click outside editables.
+  * Blur in the 1st editable should be logged.