fix(forms): preserve custom-control focus context in signal forms

cexbrayat · mattrbeck · commit 63d800570399 · 2026-02-13T09:37:19.000-08:00
Fixes #67051 Store custom control focus callbacks in a wrapper so method invocation keeps the original object context. Without this, custom focus methods that access instance members throw at runtime when focusBoundControl() is called.
diff --git a/packages/forms/signals/src/directive/form_field_directive.ts b/packages/forms/signals/src/directive/form_field_directive.ts
@@ -251,7 +251,7 @@ export class FormField<T> {
     this.installClassBindingEffect();
 
     if (bindingOptions?.focus) {
-      this.focuser = bindingOptions.focus;
+      this.focuser = (focusOptions?: FocusOptions) => bindingOptions.focus!(focusOptions);
     }
 
     // Register this control on the field state it is currently bound to. We do this at the end of
diff --git a/packages/forms/signals/test/web/focus.spec.ts b/packages/forms/signals/test/web/focus.spec.ts
@@ -45,12 +45,14 @@ describe('FieldState focus behavior', () => {
     @Component({
       selector: 'custom-control',
       host: {'tabindex': '-1'},
-      template: '',
+      template: '<input #input />',
     })
     class CustomControl {
       readonly value = model<string>();
+      readonly input = viewChild.required<ElementRef<HTMLInputElement>>('input');
       focus() {
         focusCalled = true;
+        this.input().nativeElement.focus();
       }
     }
 
@@ -68,6 +70,7 @@ describe('FieldState focus behavior', () => {
     await act(() => fixture.componentInstance.f().focusBoundControl());
     expect(focusCalled).toBeTrue();
     expect(document.activeElement).not.toBe(customControl);
+    expect(document.activeElement).toBe(customControl.querySelector('input'));
   });
 
   it('should directly focus a custom control that has no custom focus logic', async () => {

Original file line number	Diff line number	Diff line change
`@@ -251,7 +251,7 @@ export class FormField<T> {`
`251`	`251`	`this.installClassBindingEffect();`
`252`	`252`
`253`	`253`	`if (bindingOptions?.focus) {`
`254`		`- this.focuser = bindingOptions.focus;`
	`254`	`+ this.focuser = (focusOptions?: FocusOptions) => bindingOptions.focus!(focusOptions);`
`255`	`255`	`}`
`256`	`256`
`257`	`257`	`// Register this control on the field state it is currently bound to. We do this at the end of`