[nzAutoFocus] can not work in <nz-input-number>

[wenqi73]

Version

1.0.0

Environment

mac OS 10.11 Chrome 67

Reproduction link

https://stackblitz.com/edit/nz-input-number?file=src%2Fapp%2Fapp.component.html

Steps to reproduce

Set [nzAutoFocus]="true"

What is expected?

NzInputNumberComponent is focused

What is actually happening?

NzInputNumberComponent is not focused

Other?

[hsuanxyz]

@wenqi73 Thanks feedback, you can use the following code:

import { Component, ViewChild, OnInit } from '@angular/core';
import { NzInputNumberComponent } from 'ng-zorro-antd';

@Component({
  selector: 'nz-demo-input-number-basic',
  template: `
    <nz-input-number [(ngModel)]="demoValue" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
  `
})
export class NzDemoInputNumberBasicComponent implements OnInit {
  demoValue = 3;

  @ViewChild(NzInputNumberComponent) numberInput;

  ngOnInit() {
    this.numberInput.focus();
  }
}

[wzhudev]

This method is actually invoked before ngAfterViewInit hook so the input element do not have autofocus attribute. Removing if (this.isInit) would make the input autofocus in Chrome. However, I failed to do the same in Firefox (why?).

ng-zorro-antd/components/input-number/nz-input-number.component.ts

Lines 106 to 114 in 4cbcd6f

	updateAutoFocus(): void {
	if (this.isInit) {
	if (this.nzAutoFocus) {
	this.renderer.setAttribute(this.inputElement.nativeElement, 'autofocus', 'autofocus');
	} else {
	this.renderer.removeAttribute(this.inputElement.nativeElement, 'autofocus');
	}
	}
	}

And this spec cannot represent how things work. Because in this case updateAutoFocus() is invoked after ngAfterViewInit. And it only detects autofocus attribute, we don't know whether the component is focused actually.

ng-zorro-antd/components/input-number/nz-input-number.spec.ts

Lines 57 to 65 in 4cbcd6f

	it('should autofocus work', () => {
	fixture.detectChanges();
	testComponent.autofocus = true;
	fixture.detectChanges();
	expect(inputElement.attributes.getNamedItem('autofocus').name).toBe('autofocus');
	testComponent.autofocus = false;
	fixture.detectChanges();
	expect(inputElement.attributes.getNamedItem('autofocus')).toBe(null);
	});

According to HTML5, autofocus would only work right after current page is loaded. Maybe it's not what users want (and seemingly useless for SPA). We could add this.focus() in ngAfterViewInit hook.

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.