Procházet zdrojové kódy

Close panel when user clicks outside it.

Maciej Gołaszewski před 6 roky
rodič
revize
637bf38c82

+ 19 - 0
packages/ckeditor5-mention/src/mentionui.js

@@ -12,6 +12,7 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
+import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
 
 import MentionsView from './ui/mentionsview';
 import DomWrapperView from './ui/domwrapperview';
@@ -81,6 +82,14 @@ export default class MentionUI extends Plugin {
 
 		const config = this.editor.config.get( 'mention' );
 
+		// Close the #panelView upon clicking outside of the plugin UI.
+		clickOutsideHandler( {
+			emitter: this.panelView,
+			contextElements: [ this.panelView.element ],
+			activator: () => this.panelView.isVisible,
+			callback: () => this._hidePanel()
+		} );
+
 		for ( const mentionDescription of config ) {
 			const feed = mentionDescription.feed;
 
@@ -95,6 +104,16 @@ export default class MentionUI extends Plugin {
 		}
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		// Destroy created UI components as they are not automatically destroyed (see ckeditor5#1341).
+		this.panelView.destroy();
+	}
+
 	_createMentionView( editor ) {
 		this._mentionsView = new MentionsView( editor.locale );
 

+ 19 - 0
packages/ckeditor5-mention/tests/mentionui.js

@@ -465,6 +465,25 @@ describe( 'MentionUI', () => {
 				} );
 		} );
 
+		it( 'should close the opened panel when click outside the panel', () => {
+			return createClassicTestEditor( staticConfig )
+				.then( () => {
+					setData( model, '<paragraph>foo []</paragraph>' );
+
+					model.change( writer => {
+						writer.insertText( '@', doc.selection.getFirstPosition() );
+					} );
+				} )
+				.then( waitForDebounce )
+				.then( () => {
+					expect( panelView.isVisible ).to.be.true;
+
+					document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
+
+					expect( panelView.isVisible ).to.be.false;
+				} );
+		} );
+
 		it( 'should hide the panel when click outside', () => {
 			return createClassicTestEditor( staticConfig )
 				.then( () => {