Do not render DOM selection when events happens inside UIElement

[jodator]

The remaining problem with widget is that you cannot click inside them. It seems that the issue with selection boils down to the fact that selection is always rendered. I've created a hack that stops selection rendering when events: focus, mousedown, click, keydown (TAB navigation) occurs on elements inside UIElement:

function preventCKEditorHandling( domElement, editor ) {
	// Prevent the editor from listening on below events in order to stop rendering selection.
	domElement.addEventListener( 'click', stopEventPropagationAndHackRendererFocus, { capture: true } );
	domElement.addEventListener( 'mousedown', stopEventPropagationAndHackRendererFocus, { capture: true } );
	domElement.addEventListener( 'focus', stopEventPropagationAndHackRendererFocus, { capture: true } );

	// Prevents TAB handling or other editor keys listeners which might be executed on editors selection.
	domElement.addEventListener( 'keydown', stopEventPropagationAndHackRendererFocus, { capture: true } );

	function stopEventPropagationAndHackRendererFocus( evt ) {
		evt.stopPropagation();
		// This prevents rendering changed view selection thus preventing to changing DOM selection while inside a widget.
		editor.editing.view._renderer.isFocused = false;
	}
}

This is rather dumb fix and requires knowing of renderer internals but the fix should include similar logic: do not render DOM selection when those events are triggered on node inside UIElement.

[pjasiun]

Agree, that's just a bug we should fix in the renderer. UI element should allow you to handle focus inside it any way you want.

[Reinmar]

I wonder if it shouldn't be an option – that you can prevent CKEditor listening to events inside a certain UIElement but you don't have to.

[Reinmar]

This ticket dups #4600.