refactor(compiler): Generate the controlCreate instruction after the native element has been created

JeanMeche · pkozlowski-opensource · commit f35b2ef47cef · 2025-12-02T12:59:49.000+01:00
This is necessary to exclude a race condition where the MutationObserver initialized by the instruction fired before the inputs are binded. fixes #65678
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/control_bindings/control_bindings.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/control_bindings/control_bindings.js
@@ -10,9 +10,8 @@ MyComponent.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({
       i0.ɵɵelementStart(1, "div");
       i0.ɵɵtext(2, "Not a form control either.");
       i0.ɵɵelementEnd();
-      i0.ɵɵelementStart(3, "input", 1);
+      i0.ɵɵelement(3, "input", 1);
       i0.ɵɵcontrolCreate();
-      i0.ɵɵelementEnd();
     }
     if (rf & 2) {
       i0.ɵɵadvance();
diff --git a/packages/compiler/src/template/pipeline/src/ingest.ts b/packages/compiler/src/template/pipeline/src/ingest.ts
@@ -316,6 +316,16 @@ function ingestElement(unit: ViewCompilationUnit, element: t.Element): void {
   const endOp = ir.createElementEndOp(id, element.endSourceSpan ?? element.startSourceSpan);
   unit.create.push(endOp);
 
+  // We want to ensure that the controlCreateOp is after the ops that create the element
+  const fieldInput = element.inputs.find(
+    (input) => input.name === 'field' && input.type === e.BindingType.Property,
+  );
+  if (fieldInput) {
+    // If the input name is 'field', this could be a form control binding which requires a
+    // `ControlCreateOp` to properly initialize.
+    unit.create.push(ir.createControlCreateOp(fieldInput.sourceSpan));
+  }
+
   // If there is an i18n message associated with this element, insert i18n start and end ops.
   if (i18nBlockId !== null) {
     ir.OpList.insertBefore<ir.CreateOp>(
@@ -1347,12 +1357,6 @@ function ingestElementBindings(
         input.sourceSpan,
       ),
     );
-
-    // If the input name is 'field', this could be a form control binding which requires a
-    // `ControlCreateOp` to properly initialize.
-    if (input.type === e.BindingType.Property && input.name === 'field') {
-      unit.create.push(ir.createControlCreateOp(input.sourceSpan));
-    }
   }
 
   unit.create.push(
diff --git a/packages/forms/signals/test/web/field_directive.spec.ts b/packages/forms/signals/test/web/field_directive.spec.ts
@@ -2527,6 +2527,47 @@ describe('field directive', () => {
       expect(customSubform.classList.contains('always')).toBe(false);
     });
   });
+
+  it('should create & bind input when a macro task is running', async () => {
+    const {promise, resolve} = promiseWithResolvers<void>();
+
+    @Component({
+      selector: 'app-form',
+      imports: [Field],
+      template: `
+        <form>
+          <select [field]="form">
+            <option value="us">United States</option>
+            <option value="ca">Canada</option>
+          </select>
+        </form>
+  `,
+    })
+    class FormComponent {
+      form = form(signal('us'));
+    }
+
+    @Component({
+      selector: 'app-root',
+      template: ``,
+    })
+    class App {
+      vcr = inject(ViewContainerRef);
+      constructor() {
+        promise.then(() => {
+          this.vcr.createComponent(FormComponent);
+        });
+      }
+    }
+
+    const fixture = act(() => TestBed.createComponent(App));
+
+    resolve();
+    await fixture.whenStable();
+
+    const select = fixture.debugElement.parent!.nativeElement.querySelector('select');
+    expect(select.value).toBe('us');
+  });
 });
 
 function setupRadioGroup() {
