Browse Source

Merge pull request #279 from ckeditor/t/ckeditor5/1501

Fix: The text alternative input should be blurred before the form is removed from the DOM. Closes ckeditor/ckeditor5/issues#1501.
Aleksander Nowodzinski 7 years ago
parent
commit
6cea72fc52

+ 4 - 0
packages/ckeditor5-image/src/imagetextalternative/imagetextalternativeui.js

@@ -191,6 +191,10 @@ export default class ImageTextAlternativeUI extends Plugin {
 			return;
 		}
 
+		// Blur the input element before removing it from DOM to prevent issues in some browsers.
+		// See https://github.com/ckeditor/ckeditor5/issues/1501.
+		this._form.saveButtonView.focus();
+
 		this._balloon.remove( this._form );
 
 		if ( focusEditable ) {

+ 15 - 1
packages/ckeditor5-image/tests/imagetextalternative/imagetextalternativeui.js

@@ -15,7 +15,7 @@ import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
-describe( 'ImageTextAlternative', () => {
+describe( 'ImageTextAlternativeUI', () => {
 	let editor, model, doc, plugin, command, form, balloon, editorElement, button;
 
 	beforeEach( () => {
@@ -160,6 +160,20 @@ describe( 'ImageTextAlternative', () => {
 			expect( balloon.visibleView ).to.equal( lastView );
 		} );
 
+		// https://github.com/ckeditor/ckeditor5/issues/1501
+		it( 'should blur url input element before hiding the view', () => {
+			setData( model, '[<image src="" alt="foo bar"></image>]' );
+
+			editor.ui.componentFactory.create( 'imageTextAlternative' ).fire( 'execute' );
+
+			const editableFocusSpy = sinon.spy( editor.editing.view, 'focus' );
+			const buttonFocusSpy = sinon.spy( form.saveButtonView, 'focus' );
+
+			form.fire( 'submit' );
+
+			expect( buttonFocusSpy.calledBefore( editableFocusSpy ) ).to.equal( true );
+		} );
+
 		describe( 'integration with the editor selection (ui#update event)', () => {
 			it( 'should re-position the form', () => {
 				setData( model, '[<image src=""></image>]' );