Fix: [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event

src/components/Composer/index.js

@@ -19,6 +19,7 @@ import isEnterWhileComposition from '../../libs/KeyboardShortcut/isEnterWhileCom
 import CONST from '../../CONST';
 import withNavigation from '../withNavigation';
 import ReportActionComposeFocusManager from '../../libs/ReportActionComposeFocusManager';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
@@ -140,6 +141,8 @@ const getNextChars = (str, cursorPos) => {
     return substr.substring(0, spaceIndex);
 };
 
+const supportsPassive = DeviceCapabilities.hasPassiveEventListenerSupport();
+
 // Enable Markdown parsing.
 // On web we like to have the Text Input field always focused so the user can easily type a new chat
 function Composer({
@@ -339,7 +342,6 @@ function Composer({
         }
 
         textInput.current.scrollTop += event.deltaY;
-        event.preventDefault();
         event.stopPropagation();
     }, []);
 
@@ -384,7 +386,7 @@ function Composer({
 
         if (textInput.current) {
             document.addEventListener('paste', handlePaste);
-            textInput.current.addEventListener('wheel', handleWheel);
+            textInput.current.addEventListener('wheel', handleWheel, supportsPassive ? {passive: true} : false);
         }
 
         return () => {

src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js

@@ -6,6 +6,8 @@ import * as DeviceCapabilities from '../../../../libs/DeviceCapabilities';
 import htmlRendererPropTypes from '../htmlRendererPropTypes';
 import BasePreRenderer from './BasePreRenderer';
 
+const supportsPassive = DeviceCapabilities.hasPassiveEventListenerSupport();
+
 const isScrollingVertically = (event) =>
     // Mark as vertical scrolling only when absolute value of deltaY is more than the double of absolute
     // value of deltaX, so user can use trackpad scroll on the code block horizontally at a wide angle.
@@ -32,7 +34,6 @@ function PreRenderer(props) {
         const horizontalOverflow = node.scrollWidth > node.offsetWidth;
         if (event.currentTarget === node && horizontalOverflow && !debouncedIsScrollingVertically(event)) {
             node.scrollLeft += event.deltaX;
-            event.preventDefault();
             event.stopPropagation();
         }
     }, []);
@@ -42,7 +43,7 @@ function PreRenderer(props) {
         if (!eventListenerRefValue) {
             return;
         }
-        eventListenerRefValue.getScrollableNode().addEventListener('wheel', scrollNode);
+        eventListenerRefValue.getScrollableNode().addEventListener('wheel', scrollNode, supportsPassive ? {passive: true} : false);
 
         return () => {
             if (!eventListenerRefValue.getScrollableNode()) {

src/libs/DeviceCapabilities/hasPassiveEventListenerSupport/index.native.ts

@@ -0,0 +1,8 @@
+import HasPassiveEventListenerSupport from './types';
+
+/**
+ * Allows us to identify whether the browser supports passive event listener.
+ */
+const hasPassiveEventListenerSupport: HasPassiveEventListenerSupport = () => false;
+
+export default hasPassiveEventListenerSupport;

src/libs/DeviceCapabilities/hasPassiveEventListenerSupport/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Allows us to identify whether the browser supports passive event listener.
+ */
+export default function hasPassiveEventListenerSupport(): boolean {
+    let supportsPassive = false;
+    try {
+        const opts = Object.defineProperty({}, 'passive', {
+            // eslint-disable-next-line getter-return
+            get() {
+                supportsPassive = true;
+            },
+        });
+        window.addEventListener('testPassive', () => {}, opts);
+        window.removeEventListener('testPassive', () => {}, opts);
+        // eslint-disable-next-line no-empty
+    } catch (e) {}
+    return supportsPassive;
+}

src/libs/DeviceCapabilities/hasPassiveEventListenerSupport/types.ts

@@ -0,0 +1,3 @@
+type HasPassiveEventListenerSupport = () => boolean;
+
+export default HasPassiveEventListenerSupport;

src/libs/DeviceCapabilities/index.ts

@@ -1,4 +1,5 @@
 import canUseTouchScreen from './canUseTouchScreen';
 import hasHoverSupport from './hasHoverSupport';
+import hasPassiveEventListenerSupport from './hasPassiveEventListenerSupport';
 
-export {canUseTouchScreen, hasHoverSupport};
+export {canUseTouchScreen, hasHoverSupport, hasPassiveEventListenerSupport};