Merge pull request #8729 from ckeditor/i/6223-table-props-baloon

Fix (table): The table properties balloon should always follow the table when the alignment changes. Closes #6223.

packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js

@@ -151,7 +151,6 @@ export default class TablePropertiesUI extends Plugin {
 	 */
 	_createPropertiesView() {
 		const editor = this.editor;
-		const viewDocument = editor.editing.view.document;
 		const config = editor.config.get( 'table.tableProperties' );
 		const borderColorsConfig = normalizeColorOptions( config.borderColors );
 		const localizedBorderColors = getLocalizedColorOptions( editor.locale, borderColorsConfig );
@@ -185,15 +184,6 @@ export default class TablePropertiesUI extends Plugin {
 			cancel();
 		} );
 
-		// Reposition the balloon or hide the form if a table is no longer selected.
-		this.listenTo( editor.ui, 'update', () => {
-			if ( !getTableWidgetAncestor( viewDocument.selection ) ) {
-				this._hideView();
-			} else if ( this._isViewVisible ) {
-				repositionContextualBalloon( editor, 'table' );
-			}
-		} );
-
 		// Close on click outside of balloon panel element.
 		clickOutsideHandler( {
 			emitter: view,
@@ -282,6 +272,10 @@ export default class TablePropertiesUI extends Plugin {
 	_showView() {
 		const editor = this.editor;
 
+		this.listenTo( editor.ui, 'update', () => {
+			this._updateView();
+		} );
+
 		// Update the view with the model values.
 		this._fillViewFormFromCommandValues();
 
@@ -303,10 +297,6 @@ export default class TablePropertiesUI extends Plugin {
 	 * @protected
 	 */
 	_hideView() {
-		if ( !this._isViewInBalloon ) {
-			return;
-		}
-
 		const editor = this.editor;
 
 		this.stopListening( editor.ui, 'update' );
@@ -322,6 +312,22 @@ export default class TablePropertiesUI extends Plugin {
 		this.editor.editing.view.focus();
 	}
 
+	/**
+	 * Repositions the {@link #_balloon} or hides the {@link #view} if a table is no longer selected.
+	 *
+	 * @protected
+	 */
+	_updateView() {
+		const editor = this.editor;
+		const viewDocument = editor.editing.view.document;
+
+		if ( !getTableWidgetAncestor( viewDocument.selection ) ) {
+			this._hideView();
+		} else if ( this._isViewVisible ) {
+			repositionContextualBalloon( editor, 'table' );
+		}
+	}
+
 	/**
 	 * Returns `true` when the {@link #view} is the visible in the {@link #_balloon}.
 	 *

packages/ckeditor5-table/tests/tableproperties/tablepropertiesui.js

@@ -507,6 +507,16 @@ describe( 'table properties', () => {
 				expect( firstBatch ).to.not.equal( secondBatch );
 			} );
 
+			it( 'should start listening to EditorUI#update', () => {
+				const spy = sinon.spy( tablePropertiesUI, 'listenTo' );
+
+				tablePropertiesButton.fire( 'execute' );
+				expect( contextualBalloon.visibleView ).to.equal( tablePropertiesView );
+
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledWith( spy, editor.ui, 'update' );
+			} );
+
 			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' );
@@ -609,5 +619,35 @@ describe( 'table properties', () => {
 				sinon.assert.calledOnce( spy );
 			} );
 		} );
+
+		describe( 'Updating the #view', () => {
+			beforeEach( () => {
+				editor.model.change( writer => {
+					writer.setSelection( editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ), 0 );
+				} );
+
+				tablePropertiesButton.fire( 'execute' );
+				expect( contextualBalloon.visibleView ).to.equal( tablePropertiesView );
+			} );
+
+			it( 'should reposition the baloon if table is selected', () => {
+				const spy = sinon.spy( contextualBalloon, 'updatePosition' );
+
+				editor.ui.fire( 'update' );
+
+				sinon.assert.calledOnce( spy );
+			} );
+
+			it( 'should hide the view and not reposition the balloon if table is no longer selected', () => {
+				const positionSpy = sinon.spy( contextualBalloon, 'updatePosition' );
+				const hideSpy = sinon.spy( tablePropertiesUI, '_hideView' );
+
+				tablePropertiesView.fire( 'submit' );
+				expect( contextualBalloon.visibleView ).to.be.null;
+
+				sinon.assert.calledOnce( hideSpy );
+				sinon.assert.notCalled( positionSpy );
+			} );
+		} );
 	} );
 } );