Merge pull request #17013 from ckeditor/ck/17002

Fix (ui): Balloon Editor toolbar no longer sticks out of the limiter element while scrolling. Closes #17002

packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.ts

@@ -289,6 +289,15 @@ export default class BlockToolbar extends Plugin {
 			}
 		} );
 
+		// Hide the panelView when the buttonView is disabled. `isEnabled` flag might be changed when
+		// user scrolls the viewport and the button is no longer visible. In such case, the panel should be hidden
+		// otherwise it will be displayed in the wrong place.
+		this.listenTo<ObservableChangeEvent<boolean>>( buttonView, 'change:isEnabled', ( evt, name, isEnabled ) => {
+			if ( !isEnabled && this.panelView.isVisible ) {
+				this._hidePanel( false );
+			}
+		} );
+
 		editor.ui.view.body.add( buttonView );
 
 		return buttonView;

packages/ckeditor5-ui/tests/toolbar/block/blocktoolbar.js

@@ -393,6 +393,16 @@ describe( 'BlockToolbar', () => {
 				sinon.assert.calledOnce( focusSpy );
 			} );
 
+			it( 'should hide the #panelView and do not focus the editable when isEnabled became false', () => {
+				blockToolbar.panelView.isVisible = true;
+				const spy = testUtils.sinon.spy( editor.editing.view, 'focus' );
+
+				blockToolbar.buttonView.isEnabled = false;
+
+				expect( blockToolbar.panelView.isVisible ).to.be.false;
+				sinon.assert.notCalled( spy );
+			} );
+
 			it( 'should hide the #panelView and focus the editable on #execute event when panel was visible', () => {
 				blockToolbar.panelView.isVisible = true;
 				const spy = testUtils.sinon.spy( editor.editing.view, 'focus' );