浏览代码

Ensured the TableCellPropertiesView is filled with date before being shown to avoid unnecessary UI animations.

Aleksander Nowodzinski 5 年之前
父节点
当前提交
de997b7e55

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js

@@ -292,6 +292,9 @@ export default class TableCellPropertiesUI extends Plugin {
 	_showView() {
 		const editor = this.editor;
 
+		// Update the view with the model values.
+		this._fillViewFormFromCommandValues();
+
 		this._balloon.add( {
 			view: this.view,
 			position: getBalloonCellPositionData( editor )
@@ -300,9 +303,6 @@ export default class TableCellPropertiesUI extends Plugin {
 		// Create a new batch. Clicking "Cancel" will undo this batch.
 		this._undoStepBatch = editor.model.createBatch();
 
-		// Update the view with the model values.
-		this._fillViewFormFromCommandValues();
-
 		// Basic a11y.
 		this.view.focus();
 	}

+ 14 - 0
packages/ckeditor5-table/tests/tablecellproperties/tablecellpropertiesui.js

@@ -566,6 +566,20 @@ describe( 'table cell properties', () => {
 			} );
 
 			describe( 'initial data', () => {
+				it( 'should be set before adding the form to the the balloon to avoid unnecessary input animations', () => {
+					const balloonAddSpy = testUtils.sinon.spy( editor.plugins.get( ContextualBalloon ), 'add' );
+					const borderStyleChangeSpy = testUtils.sinon.spy();
+
+					tableCellPropertiesView.on( 'change:borderStyle', borderStyleChangeSpy );
+
+					editor.commands.get( 'tableCellBorderStyle' ).value = 'a';
+					tableCellPropertiesButton.fire( 'execute' );
+
+					sinon.assert.calledOnce( borderStyleChangeSpy );
+					sinon.assert.calledOnce( balloonAddSpy );
+					sinon.assert.callOrder( borderStyleChangeSpy, balloonAddSpy );
+				} );
+
 				it( 'should be set from the command values', () => {
 					editor.commands.get( 'tableCellBorderStyle' ).value = 'a';
 					editor.commands.get( 'tableCellBorderColor' ).value = 'b';