diff --git a/src/widgettoolbarrepository.js b/src/widgettoolbarrepository.js
index 690bcaf3..53ec783d 100644
--- a/src/widgettoolbarrepository.js
+++ b/src/widgettoolbarrepository.js
@@ -151,8 +151,14 @@ export default class WidgetToolbarRepository extends Plugin {
for ( const definition of this._toolbarDefinitions.values() ) {
const relatedElement = definition.getRelatedElement( this.editor.editing.view.document.selection );
- if ( !this.editor.ui.focusTracker.isFocused || !relatedElement ) {
- this._hideToolbar( definition );
+ if ( !this.editor.ui.focusTracker.isFocused ) {
+ if ( this._isToolbarVisible( definition ) ) {
+ this._hideToolbar( definition );
+ }
+ } else if ( !relatedElement ) {
+ if ( this._isToolbarInBalloon( definition ) ) {
+ this._hideToolbar( definition );
+ }
} else {
const relatedElementDepth = relatedElement.getAncestors().length;
@@ -180,10 +186,6 @@ export default class WidgetToolbarRepository extends Plugin {
* @param {module:widget/widgettoolbarrepository~WidgetRepositoryToolbarDefinition} toolbarDefinition
*/
_hideToolbar( toolbarDefinition ) {
- if ( !this._isToolbarVisible( toolbarDefinition ) ) {
- return;
- }
-
this._balloon.remove( toolbarDefinition.view );
}
@@ -201,7 +203,7 @@ export default class WidgetToolbarRepository extends Plugin {
_showToolbar( toolbarDefinition, relatedElement ) {
if ( this._isToolbarVisible( toolbarDefinition ) ) {
repositionContextualBalloon( this.editor, relatedElement );
- } else if ( !this._balloon.hasView( toolbarDefinition.view ) ) {
+ } else if ( !this._isToolbarInBalloon( toolbarDefinition ) ) {
this._balloon.add( {
view: toolbarDefinition.view,
position: getBalloonPositionData( this.editor, relatedElement ),
@@ -213,9 +215,19 @@ export default class WidgetToolbarRepository extends Plugin {
/**
* @private
* @param {Object} toolbar
+ * @returns {Boolean}
*/
_isToolbarVisible( toolbar ) {
- return this._balloon.visibleView == toolbar.view;
+ return this._balloon.visibleView === toolbar.view;
+ }
+
+ /**
+ * @private
+ * @param {Object} toolbar
+ * @returns {Boolean}
+ */
+ _isToolbarInBalloon( toolbar ) {
+ return this._balloon.hasView( toolbar.view );
}
}
diff --git a/tests/widgettoolbarrepository.js b/tests/widgettoolbarrepository.js
index 5036f1ec..5784b2b6 100644
--- a/tests/widgettoolbarrepository.js
+++ b/tests/widgettoolbarrepository.js
@@ -136,6 +136,71 @@ describe( 'WidgetToolbarRepository', () => {
expect( balloon.visibleView ).to.equal( null );
} );
+ it( 'toolbar should be removed from not visible balloon stack when the `getRelatedElement` callback returns null', () => {
+ balloon.add( {
+ view: new View(),
+ stackId: 'secondary',
+ position: {
+ target: {}
+ }
+ } );
+
+ widgetToolbarRepository.register( 'fake', {
+ items: editor.config.get( 'fake.toolbar' ),
+ getRelatedElement: getSelectedFakeWidget
+ } );
+
+ setData( model, 'foo[]' );
+
+ const fakeWidgetToolbarView = widgetToolbarRepository._toolbarDefinitions.get( 'fake' ).view;
+
+ expect( balloon.hasView( fakeWidgetToolbarView ) );
+ expect( balloon.visibleView ).to.not.equal( fakeWidgetToolbarView );
+
+ model.change( writer => {
+ // Select the foo.
+ writer.setSelection( model.document.getRoot().getChild( 0 ), 'in' );
+ } );
+
+ expect( balloon.hasView( fakeWidgetToolbarView ) ).to.equal( false );
+ } );
+
+ it( 'toolbar should be hidden when the editor ui lost focus', () => {
+ widgetToolbarRepository.register( 'fake', {
+ items: editor.config.get( 'fake.toolbar' ),
+ getRelatedElement: getSelectedFakeWidget
+ } );
+
+ setData( model, 'foo[]' );
+
+ editor.ui.focusTracker.isFocused = false;
+
+ expect( balloon.visibleView ).to.equal( null );
+ } );
+
+ it( 'toolbar should do nothing with toolbar when the editor ui lost focus but toolbar is not a visible view', () => {
+ balloon.add( {
+ view: new View(),
+ stackId: 'secondary',
+ position: {
+ target: {}
+ }
+ } );
+
+ widgetToolbarRepository.register( 'fake', {
+ items: editor.config.get( 'fake.toolbar' ),
+ getRelatedElement: getSelectedFakeWidget
+ } );
+
+ setData( model, 'foo[]' );
+
+ const fakeWidgetToolbarView = widgetToolbarRepository._toolbarDefinitions.get( 'fake' ).view;
+
+ editor.ui.focusTracker.isFocused = false;
+
+ expect( balloon.hasView( fakeWidgetToolbarView ) ).to.equal( true );
+ } );
+
it( 'toolbar should update its position when other widget is selected', () => {
widgetToolbarRepository.register( 'fake', {
items: editor.config.get( 'fake.toolbar' ),