@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  template: `
    <button (click)="click()">Show inputs and focus the firt one</button>
    @if (inputsShown) {
      <input #foo />
    }
  `,
})
export class AppComponent {
  title = 'repro';

  inputs = viewChildren<ElementRef<HTMLInputElement>>('foo');

  inputsShown = false;
  injector = inject(Injector);

  click() {
    this.inputsShown = true;
    afterNextRender(
      () => {
        console.log('inputs().length = ' + this.inputs().length);
        console.log('input = ' + this.inputs()[0]);
        this.inputs()[0]?.nativeElement.focus();
      },
      {
        injector: this.injector,
      }
    );
  }
}

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
    }).compileComponents();
  });

  it('should give the focus to the input', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;

    fixture.detectChanges();

    const button = fixture.debugElement.query(By.css('button')).nativeElement;

    button.click();
    fixture.detectChanges();

    // check that the input has been displayed (passes)
    const input = fixture.debugElement.query(By.css('input')).nativeElement;
    expect(input).toBeTruthy();

    // check that the viewChildren is populated (passes)
    expect(app.inputs().length).toBe(1);
    expect(app.inputs()[0].nativeElement).toBe(input);

    // check that it has the focus (fails, and console shows the input from the viewChildren is undefined)
    expect(document.activeElement).toBe(input);
  });
});