diff --git a/src/panel/balloon/contextualballoon.js b/src/panel/balloon/contextualballoon.js index c834a5d3..d5666ce5 100644 --- a/src/panel/balloon/contextualballoon.js +++ b/src/panel/balloon/contextualballoon.js @@ -49,6 +49,9 @@ export default class ContextualBalloon extends Plugin { */ this._stack = new Map(); + // Editor should be focused when contextual balloon is focused. + this.editor.ui.focusTracker.add( this.view.element ); + // Add balloon panel view to editor `body` collection and wait until view will be ready. return this.editor.ui.view.body.add( this.view ); } diff --git a/tests/panel/balloon/contextualballoon.js b/tests/panel/balloon/contextualballoon.js index 757c117e..8edc0f9f 100644 --- a/tests/panel/balloon/contextualballoon.js +++ b/tests/panel/balloon/contextualballoon.js @@ -10,7 +10,7 @@ import View from '../../../src/view'; import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror'; import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; -/* global document, setTimeout */ +/* global document, Event, setTimeout */ describe( 'ContextualBalloon', () => { let editor, editorElement, balloon, viewA, viewB; @@ -66,6 +66,19 @@ describe( 'ContextualBalloon', () => { it( 'should add balloon panel view to editor `body` collection', () => { expect( editor.ui.view.body.getIndex( balloon.view ) ).to.above( -1 ); } ); + + it( 'should register balloon panel element in editor.ui#focusTracker', () => { + editor.ui.focusTracker.isfocused = false; + + balloon.add( { + view: viewB, + position: { target: 'fake' } + } ); + + balloon.view.element.dispatchEvent( new Event( 'focus' ) ); + + expect( editor.ui.focusTracker.isFocused ).to.true; + } ); } ); describe( 'hasView()', () => {