Explorar o código

Focused toolbar on panel open.

Oskar Wróbel %!s(int64=7) %!d(string=hai) anos
pai
achega
92254ba138

+ 6 - 0
packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js

@@ -357,10 +357,16 @@ export default class BlockToolbar extends Plugin {
 	 * @private
 	 */
 	_showPanel() {
+		const wasVisible = this.panelView.isVisible;
+
 		this.panelView.pin( {
 			target: this.buttonView.element,
 			limiter: this.editor.ui.view.editableElement
 		} );
+
+		if ( !wasVisible ) {
+			this.toolbarView.items.get( 0 ).focus();
+		}
 	}
 
 	/**

+ 15 - 3
packages/ckeditor5-ui/tests/toolbar/block/blocktoolbar.js

@@ -164,18 +164,20 @@ describe( 'BlockToolbar', () => {
 				expect( editor.ui.focusTracker.isFocused ).to.true;
 			} );
 
-			it( 'should pin panelView to the button on #execute event', () => {
+			it( 'should pin panelView to the button and focus first item in toolbar on #execute event', () => {
 				expect( blockToolbar.panelView.isVisible ).to.false;
 
-				const spy = testUtils.sinon.spy( blockToolbar.panelView, 'pin' );
+				const pinSpy = testUtils.sinon.spy( blockToolbar.panelView, 'pin' );
+				const focusSpy = testUtils.sinon.spy( blockToolbar.toolbarView.items.get( 0 ), 'focus' );
 
 				blockToolbar.buttonView.fire( 'execute' );
 
 				expect( blockToolbar.panelView.isVisible ).to.true;
-				sinon.assert.calledWith( spy, {
+				sinon.assert.calledWith( pinSpy, {
 					target: blockToolbar.buttonView.element,
 					limiter: editor.ui.view.editableElement
 				} );
+				sinon.assert.calledOnce( focusSpy );
 			} );
 
 			it( 'should hide panelView and focus editable on #execute event when panel was visible', () => {
@@ -357,6 +359,16 @@ describe( 'BlockToolbar', () => {
 			} );
 		} );
 
+		it( 'should not reset toolbar focus on view#render', () => {
+			blockToolbar.panelView.isVisible = true;
+
+			const spy = testUtils.sinon.spy( blockToolbar.toolbarView, 'focus' );
+
+			editor.editing.view.fire( 'render' );
+
+			sinon.assert.notCalled( spy );
+		} );
+
 		it( 'should hide opened panel on a selection direct change', () => {
 			blockToolbar.panelView.isVisible = true;