fix(components/datetime): datepicker calendar overlay prevents uninte…

…nded keyboard navigation from reaching parent components (#1952)
blackbaud · Jan 23, 2024 · 34c8941 · 34c8941
1 parent 1d3f528
commit 34c8941
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/libs/components/datetime/src/lib/modules/datepicker/datepicker.component.spec.ts b/libs/components/datetime/src/lib/modules/datepicker/datepicker.component.spec.ts
@@ -341,15 +341,16 @@ describe('datepicker', () => {
       fixture.detectChanges();
       tick();
       clickTrigger(fixture);
+      let picker = getCalendar();
 
-      SkyAppTestUtility.fireDomEvent(window.document, 'keydown', {
+      SkyAppTestUtility.fireDomEvent(picker, 'keyup', {
         customEventInit: {
           key: 'escape',
         },
       });
       fixture.detectChanges();
       tick();
-      const picker = getCalendar();
+      picker = getCalendar();
 
       expect(picker).toBeNull();
     }));
@@ -406,15 +407,16 @@ describe('datepicker', () => {
       fixture.detectChanges();
       tick();
       clickTrigger(fixture);
+      let picker = getCalendar();
 
-      SkyAppTestUtility.fireDomEvent(window.document, 'keydown', {
+      SkyAppTestUtility.fireDomEvent(picker, 'keydown', {
         customEventInit: {
           key: undefined,
         },
       });
       fixture.detectChanges();
       tick();
-      const picker = getCalendar();
+      picker = getCalendar();
 
       expect(picker).not.toBeNull();
     }));

diff --git a/libs/components/datetime/src/lib/modules/datepicker/datepicker.component.ts b/libs/components/datetime/src/lib/modules/datepicker/datepicker.component.ts
@@ -120,6 +120,8 @@ export class SkyDatepickerComponent implements OnDestroy, OnInit {
     if (value) {
       this.#_calendarRef = value;
 
+      this.#addKeyupListener();
+
       // Wait for the calendar component to render before gauging dimensions.
       setTimeout(() => {
         if (this.calendarRef) {
@@ -181,7 +183,7 @@ export class SkyDatepickerComponent implements OnDestroy, OnInit {
 
   #overlay: SkyOverlayInstance | undefined;
 
-  #overlayKeydownListener: Subscription | undefined;
+  #overlayKeyupListener: Subscription | undefined;
 
   #_calendarRef: ElementRef | undefined;
 
@@ -382,8 +384,6 @@ export class SkyDatepickerComponent implements OnDestroy, OnInit {
           }
         });
 
-      this.#addKeydownListener();
-
       overlay.attachTemplate(this.calendarTemplateRef);
 
       this.#overlay = overlay;
@@ -398,25 +398,29 @@ export class SkyDatepickerComponent implements OnDestroy, OnInit {
     }
   }
 
-  #addKeydownListener(): void {
-    this.#overlayKeydownListener = fromEvent<KeyboardEvent>(
-      window.document,
-      'keydown',
-    )
-      .pipe(takeUntil(this.#ngUnsubscribe))
-      .subscribe((event) => {
-        const key = event.key?.toLowerCase();
-        if (key === 'escape' && this.isOpen) {
-          this.#closePicker();
-        }
-      });
+  #addKeyupListener(): void {
+    const datepickerCalendarElement = this.calendarRef?.nativeElement;
+
+    if (datepickerCalendarElement) {
+      this.#overlayKeyupListener = fromEvent<KeyboardEvent>(
+        datepickerCalendarElement,
+        'keyup',
+      )
+        .pipe(takeUntil(this.#ngUnsubscribe))
+        .subscribe((event) => {
+          const key = event.key?.toLowerCase();
+          if (key === 'escape' && this.isOpen) {
+            this.#closePicker();
+          }
+        });
+    }
   }
 
   #removePickerEventListeners(): void {
     this.#calendarUnsubscribe.next();
     this.#calendarUnsubscribe.complete();
     this.#calendarUnsubscribe = new Subject<void>();
-    this.#overlayKeydownListener?.unsubscribe();
+    this.#overlayKeyupListener?.unsubscribe();
   }
 
   #cancelCustomDatesSubscription(): void {