Merge pull request #49 from ckeditor/t/42

Fix: Moved focus tracking setup to `ImageBalloonPanelView#init()` method to prevent too early access to the view element. Closes #42.

src/ui/imageballoonpanelview.js

@@ -54,9 +54,6 @@ export default class ImageBalloonPanelView extends BalloonPanelView {
 		this.editor = editor;
 		const editingView = editor.editing.view;
 
-		// Let the focusTracker know about new focusable UI element.
-		editor.ui.focusTracker.add( this.element );
-
 		// Hide the balloon if editor had focus and now focus is lost.
 		this.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, is, was ) => {
 			if ( was && !is ) {
@@ -85,6 +82,16 @@ export default class ImageBalloonPanelView extends BalloonPanelView {
 		}, 100 );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		// Let the focusTracker know about new focusable UI element.
+		this.editor.ui.focusTracker.add( this.element );
+
+		return super.init();
+	}
+
 	/**
 	 * Attaches the panel and enables `scroll` and `resize` listeners.
 	 */

tests/ui/imageballoonpanelview.js

@@ -36,12 +36,25 @@ describe( 'ImageBalloonPanel', () => {
 		return editor.destroy();
 	} );
 
-	it( 'should add element to editor\'s focus tracker', () => {
+	it( 'init method should return a promise', () => {
+		const panel = new ImageBalloonPanel( editor );
+		const promise  = panel.init();
+
+		expect( promise ).to.be.instanceof( Promise );
+
+		return promise;
+	} );
+
+	it( 'should add element to editor\'s focus tracker after init', () => {
 		const spy = sinon.spy( editor.ui.focusTracker, 'add' );
 		const panel = new ImageBalloonPanel( editor );
 
-		sinon.assert.calledOnce( spy );
-		sinon.assert.calledWithExactly( spy, panel.element );
+		sinon.assert.notCalled( spy );
+
+		return panel.init().then( () => {
+			sinon.assert.calledOnce( spy );
+			sinon.assert.calledWithExactly( spy, panel.element );
+		} );
 	} );
 
 	it( 'should detach panel when focus is removed', () => {