Merge pull request #17098 from ckeditor/ck/16412

Feature (engine): Add `usePassive` option to the `DomEventObserver` that enables listening passive events. Closes #16412

packages/ckeditor5-engine/src/view/observer/domeventobserver.ts

@@ -56,6 +56,12 @@ export default abstract class DomEventObserver<
 	 */
 	public useCapture: boolean = false;
 
+	/**
+	 * If set to `true`, indicates that the function specified by listener will never call `preventDefault()`.
+	 * Default value is `false`.
+	 */
+	public usePassive: boolean = false;
+
 	/**
 	 * Callback which should be called when the DOM event occurred. Note that the callback will not be called if
 	 * observer {@link #isEnabled is not enabled}.
@@ -75,7 +81,7 @@ export default abstract class DomEventObserver<
 				if ( this.isEnabled && !this.checkShouldIgnoreEventFromTarget( domEvent.target as any ) ) {
 					this.onDomEvent( domEvent );
 				}
-			}, { useCapture: this.useCapture } );
+			}, { useCapture: this.useCapture, usePassive: this.usePassive } );
 		} );
 	}
 

packages/ckeditor5-engine/tests/view/observer/domeventobserver.js

@@ -44,6 +44,14 @@ class ClickCapturingObserver extends ClickObserver {
 	}
 }
 
+class ClickPassiveObserver extends ClickObserver {
+	constructor( view ) {
+		super( view );
+
+		this.usePassive = true;
+	}
+}
+
 describe( 'DomEventObserver', () => {
 	let view, viewDocument;
 
@@ -184,6 +192,23 @@ describe( 'DomEventObserver', () => {
 		childDomElement.dispatchEvent( domEvent );
 	} );
 
+	it( 'should allow to listen passive events', () => {
+		const domElement = document.createElement( 'div' );
+		createViewRoot( viewDocument );
+		view.attachDomRoot( domElement );
+
+		const eventHandlerSpy = sinon.spy( ClickPassiveObserver.prototype, 'listenTo' );
+
+		view.addObserver( ClickPassiveObserver );
+
+		expect( eventHandlerSpy ).to.be.calledWith( domElement, 'click', sinon.match.func, {
+			useCapture: false,
+			usePassive: true
+		} );
+
+		eventHandlerSpy.restore();
+	} );
+
 	describe( 'integration with UIElement', () => {
 		let domRoot, domEvent, evtSpy, uiElement;