diff --git a/packages/ckeditor5-image/src/imageinsert/imageinsertui.js b/packages/ckeditor5-image/src/imageinsert/imageinsertui.js index 0341710b79c..ed726c94a4c 100644 --- a/packages/ckeditor5-image/src/imageinsert/imageinsertui.js +++ b/packages/ckeditor5-image/src/imageinsert/imageinsertui.js @@ -113,7 +113,10 @@ export default class ImageInsertUI extends Plugin { insertImageViaUrlForm.label = t( 'Insert image via URL' ); } } - } ); + // Note: Use the low priority to make sure the following listener starts working after the + // default action of the drop-down is executed (i.e. the panel showed up). Otherwise, the + // invisible form/input cannot be focused/selected. + }, { priority: 'low' } ); imageInsertView.delegate( 'submit', 'cancel' ).to( dropdownView ); this.delegate( 'cancel' ).to( dropdownView ); diff --git a/packages/ckeditor5-image/tests/imageinsert/imageinsertui.js b/packages/ckeditor5-image/tests/imageinsert/imageinsertui.js index 91e664ad224..2e044121e9a 100644 --- a/packages/ckeditor5-image/tests/imageinsert/imageinsertui.js +++ b/packages/ckeditor5-image/tests/imageinsert/imageinsertui.js @@ -278,6 +278,20 @@ describe( 'ImageInsertUI', () => { sinon.assert.notCalled( commandSpy ); sinon.assert.calledOnce( cancelSpy ); } ); + + it( 'should focus on "insert image via URL" input after opening', () => { + let spy; + + // The ImageInsertPanelView is added on first open. + // See https://github.com/ckeditor/ckeditor5/pull/8019#discussion_r484069652 + dropdown.on( 'change:isOpen', () => { + const imageInsertPanelView = dropdown.panelView.children.first; + spy = sinon.spy( imageInsertPanelView, 'focus' ); + }, { priority: 'highest' } ); + + dropdown.buttonView.fire( 'open' ); + sinon.assert.calledOnce( spy ); + } ); } ); it( 'should inject integrations to the dropdown panel view from the config', async () => {