IE: Cursor moves outside of the anchor when space is entered

[Irina]

Steps to reproduce

1. Insert following into the console tab in the dev tools:

CKEDITOR.instances.editor.document.on("keypress", function(ev){
   var key = ev.data.getKey();
   if (key == 64) { // '@'
      ev.data.preventDefault();
      CKEDITOR.instances.editor.insertHtml('<a href="">@</a>');
   }
})

2. Input some text in the instance of the ckeditor such as "hey @amy jones"
3. In the console you can see how "@amy" is within the anchor element whereas "jones" was moved outside.

Expected result

The "jones" should be appearing in blue as part of the link.

Actual result

The "jones" gets moved outside of the link.

Other details (browser, OS, CKEditor version, installed plugins)

Tested in IE11 & MS Edge.

Note: you might need to disable automatic hyperlinking in IE11 for testing.

[Jakub Ś]

Code I have used:

editor.on( 'contentDom', function( evt ){
	editor.editable().attachListener( this.document, 'keydown',	function( event ) {
		var key = event.data.getKey();
		console.log( key );
			if ( key ==  50 ) { // '@'
				event.data.preventDefault();
				editor.insertHtml( '<a href="">@</a>' );
			}
	});						
});

Results:(I got same results by applying inline link style from code)
IE11: <p><a href="">@amy</a> jones</p> - space breaks link
Chrome: <p><a href="">@</a>amy jones</p> - only @ gets linked
Firefox: <p><a href="">@amy jones test</a></p> - there is no way to leave a link with space

We have 3 different results. Which is correct? Anyone?

Perhaps there should be some other fourth workflow here?

[Jakub Ś]

Currently we are working on an improvement for link (#11277, #12151, #7154) which should separate text from href. When you however autolink like that, anyone’s guess would probably be that href is the same as text and that you can't separate these two. Assuming that guess is correct (and this is the most reasonable approach in this case IMO) then we should not allow any spaces in text/href and IE is correct here.

[Marek Lewandowski]

Unfortunately this is non-standard, default implementation for every vendor.

With webkit based browsers it's impossible (without hacking) to place the selection at the end of <a> element (​https://bugs.chromium.org/p/chromium/issues/detail?id=588418 and ​https://bugs.webkit.org/show_bug.cgi?id=154496).

Currently the best implementation is in Firefox. You should be able to put space inside a link while typing, as you might simply want to put some semantic inner text instead of just an URL.

That being said, there's little we can do without browser vendor fixes.