Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrate date-picker calendar input auto-focus option and functionality #3530

Closed
cnotv opened this issue Jun 4, 2019 · 1 comment
Closed

Comments

@cnotv
Copy link

cnotv commented Jun 4, 2019

What problem does this feature solve?

Allow to optionally automatically focus the date input field on panel open.

This would allow quick editing.

The proposed implementation uses "document.querySelector" which probably you would like to avoid.

What does the proposed API look like?

@Input() @InputBoolean() calInputAutoFocus: boolean;
@ViewChild('datepicker') datepicker: NzDatePickerComponent;

ngOnInit() {
    if (calInputAutoFocus) {
      this.subscribeInputFocus();
    }

}

private subscribeInputFocus(): Subscription {
    return this.datepicker.nzOnOpenChange.subscribe((open: boolean) => {
      if (open) {
        setTimeout(() => {
          const calInput = document.querySelector(
            'calendar-input input.ant-calendar-input'
          ) as HTMLInputElement;
          calInput.focus();
        });
      }
    });
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants