Merge pull request #8255 from ckeditor/i/7896

Fix (image): The URL input field will now be focused when the image dropdown is opened. Closes #7896.

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 );

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 () => {