fix(module:datepicker): focus input when opened programmatically (#7512)

Co-authored-by: Sébastien Cambon <sebastiencambon&hotmail.com>
NG-ZORRO · Jul 11, 2022 · b3a27d8 · b3a27d8
1 parent a652470
commit b3a27d8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -159,6 +159,12 @@ describe('NzDatePickerComponent', () => {
       expect(getPickerContainer()).not.toBeNull();
     }));
 
+    it('should have focus when opened progammatically', fakeAsync(() => {
+      fixture.detectChanges();
+      openPickerByCode();
+      expect(document.activeElement).toEqual(getPickerInput(fixture.debugElement));
+    }));
+
     it('should open by click and close by tab', fakeAsync(() => {
       const nzOnChange = spyOn(fixtureInstance, 'nzOnChange');
       fixtureInstance.useSuite = 5;
@@ -1189,6 +1195,13 @@ describe('NzDatePickerComponent', () => {
     fixture.detectChanges();
   }
 
+  function openPickerByCode(): void {
+    fixtureInstance.datePicker.open();
+    fixture.detectChanges();
+    tick(500);
+    fixture.detectChanges();
+  }
+
   function triggerInputBlur(): void {
     dispatchFakeEvent(getPickerInput(fixture.debugElement), 'focusout');
   }

diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -432,6 +432,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
       this.updateInputWidthAndArrowLeft();
       this.overlayOpen = true;
       this.nzOnOpenChange.emit(true);
+      this.focus();
       this.cdr.markForCheck();
     }
   }