fix(ivy): mark views dirty by default when events fire (#28474)

In Ivy, we support a new manual mode that allows for stricter control
over change detection in OnPush components. Specifically, in this mode,
events do not automatically mark OnPush views as dirty. Only changed
inputs and manual calls to `markDirty()` actually mark a view dirty.

However, this mode cannot be the default for OnPush components if we
want to be backwards compatible with View Engine. This commit re-adds
the legacy logic for OnPush components where events always mark views
dirty and makes it the default behavior.

Note: It is still TODO to add a public API for manual change detection.

PR Close #28474

packages/core/src/render3/instructions.ts

@@ -956,13 +956,14 @@ function listenerInternal(
       // The first argument of `listen` function in Procedural Renderer is:
       // - either a target name (as a string) in case of global target (window, document, body)
       // - or element reference (in all other cases)
+      listenerFn = wrapListener(tNode, lView, listenerFn, false /** preventDefault */);
       const cleanupFn = renderer.listen(resolved.name || target, eventName, listenerFn);
       lCleanup.push(listenerFn, cleanupFn);
       useCaptureOrSubIdx = lCleanupIndex + 1;
     } else {
-      const wrappedListener = wrapListenerWithPreventDefault(listenerFn);
-      target.addEventListener(eventName, wrappedListener, useCapture);
-      lCleanup.push(wrappedListener);
+      listenerFn = wrapListener(tNode, lView, listenerFn, true /** preventDefault */);
+      target.addEventListener(eventName, listenerFn, useCapture);
+      lCleanup.push(listenerFn);
     }
 
     const idxOrTargetGetter = eventTargetResolver ?
@@ -2578,17 +2579,41 @@ function markDirtyIfOnPush(lView: LView, viewIndex: number): void {
   }
 }
 
-/** Wraps an event listener with preventDefault behavior. */
-function wrapListenerWithPreventDefault(listenerFn: (e?: any) => any): EventListener {
-  return function wrapListenerIn_preventDefault(e: Event) {
-    if (listenerFn(e) === false) {
+/**
+ * Wraps an event listener with a function that marks ancestors dirty and prevents default behavior,
+ * if applicable.
+ *
+ * @param tNode The TNode associated with this listener
+ * @param lView The LView that contains this listener
+ * @param listenerFn The listener function to call
+ * @param wrapWithPreventDefault Whether or not to prevent default behavior
+ * (the procedural renderer does this already, so in those cases, we should skip)
+ */
+function wrapListener(
+    tNode: TNode, lView: LView, listenerFn: (e?: any) => any,
+    wrapWithPreventDefault: boolean): EventListener {
+  // Note: we are performing most of the work in the listener function itself
+  // to optimize listener registration.
+  return function wrapListenerIn_markDirtyAndPreventDefault(e: Event) {
+    // In order to be backwards compatible with View Engine, events on component host nodes
+    // must also mark the component view itself dirty (i.e. the view that it owns).
+    const startView =
+        tNode.flags & TNodeFlags.isComponent ? getComponentViewByIndex(tNode.index, lView) : lView;
+
+    // See interfaces/view.ts for more on LViewFlags.ManualOnPush
+    if ((lView[FLAGS] & LViewFlags.ManualOnPush) === 0) {
+      markViewDirty(startView);
+    }
+
+    const result = listenerFn(e);
+    if (wrapWithPreventDefault && result === false) {
       e.preventDefault();
       // Necessary for legacy browsers that don't support preventDefault (e.g. IE)
       e.returnValue = false;
     }
+    return result;
   };
 }
-
 /**
  * Marks current view and all ancestors dirty.
  *
@@ -2600,12 +2625,15 @@ function wrapListenerWithPreventDefault(listenerFn: (e?: any) => any): EventList
  * @param lView The starting LView to mark dirty
  * @returns the root LView
  */
-export function markViewDirty(lView: LView): LView {
+export function markViewDirty(lView: LView): LView|null {
   while (lView && !(lView[FLAGS] & LViewFlags.IsRoot)) {
     lView[FLAGS] |= LViewFlags.Dirty;
     lView = lView[PARENT] !;
   }
-  lView[FLAGS] |= LViewFlags.Dirty;
+  // Detached views do not have a PARENT and also aren't root views
+  if (lView) {
+    lView[FLAGS] |= LViewFlags.Dirty;
+  }
   return lView;
 }
 
@@ -2791,7 +2819,7 @@ function executeViewQueryFn<T>(lView: LView, tView: TView, component: T): void {
  */
 export function markDirty<T>(component: T) {
   ngDevMode && assertDefined(component, 'component');
-  const rootView = markViewDirty(getComponentViewByInstance(component));
+  const rootView = markViewDirty(getComponentViewByInstance(component)) !;
 
   ngDevMode && assertDefined(rootView[CONTEXT], 'rootContext should be defined');
   scheduleTick(rootView[CONTEXT] as RootContext, RootContextFlags.DetectChanges);

packages/core/src/render3/interfaces/view.ts

@@ -241,24 +241,41 @@ export const enum LViewFlags {
   /** Whether this view has default change detection strategy (checks always) or onPush */
   CheckAlways = 0b00000010000,
 
+  /**
+   * Whether or not manual change detection is turned on for onPush components.
+   *
+   * This is a special mode that only marks components dirty in two cases:
+   * 1) There has been a change to an @Input property
+   * 2) `markDirty()` has been called manually by the user
+   *
+   * Note that in this mode, the firing of events does NOT mark components
+   * dirty automatically.
+   *
+   * Manual mode is turned off by default for backwards compatibility, as events
+   * automatically mark OnPush components dirty in View Engine.
+   *
+   * TODO: Add a public API to ChangeDetectionStrategy to turn this mode on
+   */
+  ManualOnPush = 0b00000100000,
+
   /** Whether or not this view is currently dirty (needing check) */
-  Dirty = 0b00000100000,
+  Dirty = 0b000001000000,
 
   /** Whether or not this view is currently attached to change detection tree. */
-  Attached = 0b00001000000,
+  Attached = 0b000010000000,
 
   /** Whether or not this view is destroyed. */
-  Destroyed = 0b00010000000,
+  Destroyed = 0b000100000000,
 
   /** Whether or not this view is the root view */
-  IsRoot = 0b00100000000,
+  IsRoot = 0b001000000000,
 
   /**
-   * Index of the current init phase on last 23 bits
+   * Index of the current init phase on last 22 bits
    */
-  IndexWithinInitPhaseIncrementer = 0b01000000000,
-  IndexWithinInitPhaseShift = 9,
-  IndexWithinInitPhaseReset = 0b00111111111,
+  IndexWithinInitPhaseIncrementer = 0b010000000000,
+  IndexWithinInitPhaseShift = 10,
+  IndexWithinInitPhaseReset = 0b001111111111,
 }
 
 /**