fix(module:date-picker): do not wrap on tabbing away from date-picker

Tabbing away from date-picker overlay was not possible: It wrapped around and usually ended up in browser's address bar.
This fixes this. Tabbing away from overlay now focuses on date-picker wrapper span.

components/date-picker/date-picker.component.spec.ts

@@ -9,7 +9,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import isSameDay from 'date-fns/is_same_day';
 
-import { dispatchKeyboardEvent, dispatchMouseEvent, NgStyleInterface } from 'ng-zorro-antd/core';
+import { dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, NgStyleInterface } from 'ng-zorro-antd/core';
 import en_US from '../i18n/languages/en_US';
 
 import { NzI18nModule, NzI18nService } from 'ng-zorro-antd/i18n';
@@ -111,6 +111,24 @@ describe('NzDatePickerComponent', () => {
       expect(getPickerContainer()).not.toBeNull();
     }));
 
+    it('should be tabbable back to trigger wrapper', fakeAsync(() => {
+      fixture.detectChanges();
+      dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(getPickerContainer()).not.toBeNull();
+
+      // It is impossible to simulate actual TAB behaviour using events.
+      // This is the next best thing.
+      dispatchFakeEvent(queryFromOverlay('span.nz-tab-catching-span'), 'focus');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(getPickerContainer()).toBeNull();
+      expect(document.activeElement).toEqual(getPickerTrigger());
+    }));
+
     it('should support nzAllowClear and work properly', fakeAsync(() => {
       const clearBtnSelector = By.css('nz-picker i.ant-calendar-picker-clear');
       const initial = (fixtureInstance.nzValue = new Date());

components/date-picker/picker.component.html

@@ -89,4 +89,5 @@
   > <!-- Compatible for overlay that not support offset dynamically and immediately -->
     <ng-content></ng-content>
   </div>
-</ng-template>
+  <span tabindex=0 (focus)="onClickBackdrop()" class="nz-tab-catching-span"></span>
+</ng-template>

components/date-picker/picker.component.ts

@@ -107,14 +107,18 @@ export class NzPickerComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit(): void {
     if (this.autoFocus) {
-      if (this.isRange) {
-        const firstInput = (this.pickerInput.nativeElement as HTMLElement).querySelector(
-          'input:first-child'
-        ) as HTMLInputElement;
-        firstInput.focus(); // Focus on the first input
-      } else {
-        this.pickerInput.nativeElement.focus();
-      }
+      this.focus();
+    }
+  }
+
+  focus(): void {
+    if (this.isRange) {
+      const firstInput = (this.pickerInput.nativeElement as HTMLElement).querySelector(
+        'input:first-child'
+      ) as HTMLInputElement;
+      firstInput.focus(); // Focus on the first input
+    } else {
+      this.pickerInput.nativeElement.focus();
     }
   }
 
@@ -135,6 +139,7 @@ export class NzPickerComponent implements OnInit, AfterViewInit {
     if (this.realOpenState) {
       this.overlayOpen = false;
       this.openChange.emit(this.overlayOpen);
+      this.focus();
     }
   }