fix(core): When using setInput, mark view dirty in same way as markForCheck (#49747)

atscott · AndrewKushnir · commit 702ec901100b · 2023-04-10T13:29:11.000-07:00
`ComponentRef.setInput` internally calls `markDirtyIfOnPush` which only marks the given view as dirty but does not mark parents dirty like `ChangeDetectorRef.markForCheck` would. https://github.com/angular/angular/blob/f071224720f8affb97fd32fb5aeaa13155b13693/packages/core/src/render3/instructions/shared.ts#L1018-L1024 `markDirtyIfOnPush` has an assumption that it’s being called from the parent’s template. That is, we don’t need to mark dirty to the root, because we’ve already traversed down to it. The function used to only be called during template execution for input bindings but was added to `setInput` later. It's not a good fit because it means that if you are responding to events such as an emit from an `Observable` and call `setInput`, the view of your `ComponentRef` won't necessarily get checked when change detection runs next. If this lives inside some `OnPush` component tree that's not already dirty, it only gets refreshed if you also call `ChangeDetectorRef.markForCheck` in the host component (because it will be "shielded" be a non-dirty parent). PR Close #49747
diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts
@@ -31,7 +31,7 @@ import {getNodeInjectable, NodeInjector} from './di';
 import {throwProviderNotFoundError} from './errors_di';
 import {registerPostOrderHooks} from './hooks';
 import {reportUnknownPropertyError} from './instructions/element_validation';
-import {addToViewTree, createLView, createTView, executeContentQueries, getOrCreateComponentTView, getOrCreateTNode, initializeDirectives, invokeDirectivesHostBindings, locateHostElement, markAsComponentHost, markDirtyIfOnPush, renderView, setInputsForProperty} from './instructions/shared';
+import {addToViewTree, createLView, createTView, executeContentQueries, getOrCreateComponentTView, getOrCreateTNode, initializeDirectives, invokeDirectivesHostBindings, locateHostElement, markAsComponentHost, markViewDirty, renderView, setInputsForProperty} from './instructions/shared';
 import {ComponentDef, DirectiveDef, HostDirectiveDefs} from './interfaces/definition';
 import {PropertyAliasValue, TContainerNode, TElementContainerNode, TElementNode, TNode, TNodeType} from './interfaces/node';
 import {Renderer, RendererFactory} from './interfaces/renderer';
@@ -44,7 +44,7 @@ import {enterView, getCurrentTNode, getLView, leaveView} from './state';
 import {computeStaticStyling} from './styling/static_styling';
 import {mergeHostAttrs, setUpAttributes} from './util/attrs_utils';
 import {stringifyForError} from './util/stringify_utils';
-import {getNativeByTNode, getTNode} from './util/view_utils';
+import {getComponentLViewByIndex, getNativeByTNode, getTNode} from './util/view_utils';
 import {RootViewRef, ViewRef} from './view_ref';
 
 export class ComponentFactoryResolver extends AbstractComponentFactoryResolver {
@@ -268,7 +268,8 @@ export class ComponentRef<T> extends AbstractComponentRef<T> {
     if (inputData !== null && (dataValue = inputData[name])) {
       const lView = this._rootLView;
       setInputsForProperty(lView[TVIEW], lView, dataValue, name, value);
-      markDirtyIfOnPush(lView, this._tNode.index);
+      const childComponentLView = getComponentLViewByIndex(this._tNode.index, lView);
+      markViewDirty(childComponentLView);
     } else {
       if (ngDevMode) {
         const cmpNameForError = stringifyForError(this.componentType);
diff --git a/packages/core/test/bundling/animations/bundle.golden_symbols.json b/packages/core/test/bundling/animations/bundle.golden_symbols.json
@@ -1200,7 +1200,7 @@
     "name": "markAsComponentHost"
   },
   {
-    "name": "markDirtyIfOnPush"
+    "name": "markViewDirty"
   },
   {
     "name": "maybeWrapInNotSelector"
diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
@@ -914,6 +914,9 @@
   {
     "name": "markAsComponentHost"
   },
+  {
+    "name": "markViewDirty"
+  },
   {
     "name": "maybeWrapInNotSelector"
   },
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -1307,9 +1307,6 @@
   {
     "name": "markAsComponentHost"
   },
-  {
-    "name": "markDirtyIfOnPush"
-  },
   {
     "name": "markDuplicates"
   },
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
@@ -1265,9 +1265,6 @@
   {
     "name": "markAsComponentHost"
   },
-  {
-    "name": "markDirtyIfOnPush"
-  },
   {
     "name": "markDuplicates"
   },
diff --git a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json
@@ -698,6 +698,9 @@
   {
     "name": "makeRecord"
   },
+  {
+    "name": "markViewDirty"
+  },
   {
     "name": "maybeWrapInNotSelector"
   },
diff --git a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json b/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
@@ -800,6 +800,9 @@
   {
     "name": "makeRecord"
   },
+  {
+    "name": "markViewDirty"
+  },
   {
     "name": "maybeWrapInNotSelector"
   },
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -1112,9 +1112,6 @@
   {
     "name": "markAsComponentHost"
   },
-  {
-    "name": "markDirtyIfOnPush"
-  },
   {
     "name": "markDuplicates"
   },
diff --git a/packages/core/test/render3/component_ref_spec.ts b/packages/core/test/render3/component_ref_spec.ts
@@ -6,12 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {ComponentRef} from '@angular/core';
 import {ComponentFactoryResolver} from '@angular/core/src/render3/component_ref';
 import {Renderer} from '@angular/core/src/render3/interfaces/renderer';
 import {RElement} from '@angular/core/src/render3/interfaces/renderer_dom';
 import {TestBed} from '@angular/core/testing';
 
-import {ChangeDetectionStrategy, Component, Injector, Input, NgModuleRef, OnChanges, Output, RendererType2, SimpleChanges, ViewEncapsulation} from '../../src/core';
+import {ChangeDetectionStrategy, Component, Injector, Input, NgModuleRef, OnChanges, Output, RendererType2, SimpleChanges, ViewChild, ViewContainerRef, ViewEncapsulation} from '../../src/core';
 import {ComponentFactory} from '../../src/linker/component_factory';
 import {RendererFactory2} from '../../src/render/api';
 import {Sanitizer} from '../../src/sanitization/sanitizer';
@@ -397,5 +398,46 @@ describe('ComponentFactory', () => {
       fixture.detectChanges();
       expect(fixture.nativeElement.textContent).toBe('pushed');
     });
+
+    it('marks parents dirty so component is not "shielded" by a non-dirty OnPush parent', () => {
+      @Component({
+        template: `{{input}}`,
+        standalone: true,
+        selector: 'dynamic',
+      })
+      class DynamicCmp {
+        @Input() input?: string;
+      }
+
+      @Component({
+        template: '<ng-template #template></ng-template>',
+        standalone: true,
+        imports: [DynamicCmp],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+      })
+      class Wrapper {
+        @ViewChild('template', {read: ViewContainerRef}) template?: ViewContainerRef;
+        componentRef?: ComponentRef<DynamicCmp>;
+
+        create() {
+          this.componentRef = this.template!.createComponent(DynamicCmp);
+        }
+        setInput(value: string) {
+          this.componentRef!.setInput('input', value);
+        }
+      }
+
+      const fixture = TestBed.createComponent(Wrapper);
+      fixture.detectChanges();
+      fixture.componentInstance.create();
+
+      fixture.componentInstance.setInput('1');
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('1');
+
+      fixture.componentInstance.setInput('2');
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('2');
+    });
   });
 });

Original file line number	Diff line number	Diff line change
`@@ -1200,7 +1200,7 @@`
`1200`	`1200`	`"name": "markAsComponentHost"`
`1201`	`1201`	`},`
`1202`	`1202`	`{`
`1203`		`- "name": "markDirtyIfOnPush"`
	`1203`	`+ "name": "markViewDirty"`
`1204`	`1204`	`},`
`1205`	`1205`	`{`
`1206`	`1206`	`"name": "maybeWrapInNotSelector"`
Original file line number	Diff line number	Diff line change
`@@ -914,6 +914,9 @@`
`914`	`914`	`{`
`915`	`915`	`"name": "markAsComponentHost"`
`916`	`916`	`},`
	`917`	`+ {`
	`918`	`+ "name": "markViewDirty"`
	`919`	`+ },`
`917`	`920`	`{`
`918`	`921`	`"name": "maybeWrapInNotSelector"`
`919`	`922`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1307,9 +1307,6 @@`
`1307`	`1307`	`{`
`1308`	`1308`	`"name": "markAsComponentHost"`
`1309`	`1309`	`},`
`1310`		`- {`
`1311`		`- "name": "markDirtyIfOnPush"`
`1312`		`- },`
`1313`	`1310`	`{`
`1314`	`1311`	`"name": "markDuplicates"`
`1315`	`1312`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1265,9 +1265,6 @@`
`1265`	`1265`	`{`
`1266`	`1266`	`"name": "markAsComponentHost"`
`1267`	`1267`	`},`
`1268`		`- {`
`1269`		`- "name": "markDirtyIfOnPush"`
`1270`		`- },`
`1271`	`1268`	`{`
`1272`	`1269`	`"name": "markDuplicates"`
`1273`	`1270`	`},`
Original file line number	Diff line number	Diff line change
`@@ -698,6 +698,9 @@`
`698`	`698`	`{`
`699`	`699`	`"name": "makeRecord"`
`700`	`700`	`},`
	`701`	`+ {`
	`702`	`+ "name": "markViewDirty"`
	`703`	`+ },`
`701`	`704`	`{`
`702`	`705`	`"name": "maybeWrapInNotSelector"`
`703`	`706`	`},`
Original file line number	Diff line number	Diff line change
`@@ -800,6 +800,9 @@`
`800`	`800`	`{`
`801`	`801`	`"name": "makeRecord"`
`802`	`802`	`},`
	`803`	`+ {`
	`804`	`+ "name": "markViewDirty"`
	`805`	`+ },`
`803`	`806`	`{`
`804`	`807`	`"name": "maybeWrapInNotSelector"`
`805`	`808`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1112,9 +1112,6 @@`
`1112`	`1112`	`{`
`1113`	`1113`	`"name": "markAsComponentHost"`
`1114`	`1114`	`},`
`1115`		`- {`
`1116`		`- "name": "markDirtyIfOnPush"`
`1117`		`- },`
`1118`	`1115`	`{`
`1119`	`1116`	`"name": "markDuplicates"`
`1120`	`1117`	`},`