fix(core): datepicker outer focustrap (#10396)

SAP · Aug 28, 2023 · ee7d631 · ee7d631
1 parent 5d31ea1
commit ee7d631
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/libs/core/src/lib/date-picker/date-picker.component.ts b/libs/core/src/lib/date-picker/date-picker.component.ts
@@ -41,7 +41,7 @@ import { FormItemControl, PopoverFormMessageService, registerFormItemControl } f
 import { PopoverService } from '@fundamental-ngx/core/popover';
 import { InputGroupInputDirective } from '@fundamental-ngx/core/input-group';
 import { createMissingDateImplementationError } from './errors';
-import { DynamicComponentService, Nullable } from '@fundamental-ngx/cdk/utils';
+import { DynamicComponentService, FocusTrapService, Nullable } from '@fundamental-ngx/cdk/utils';
 import { FormStates } from '@fundamental-ngx/cdk/forms';
 import { MobileModeConfig } from '@fundamental-ngx/core/mobile-mode';
 import { FD_DATE_PICKER_COMPONENT, FD_DATE_PICKER_MOBILE_CONFIG } from './tokens';
@@ -430,6 +430,11 @@ export class DatePickerComponent<D>
     /** @hidden */
     private readonly _dynamicComponentService = inject(DynamicComponentService);
 
+    /** @hidden */
+    private readonly _focusTrapService = inject(FocusTrapService, {
+        optional: true
+    });
+
     /** @hidden */
     private _mobileComponentRef: Nullable<ComponentRef<DatePickerMobileComponent<D>>>;
 
@@ -529,6 +534,11 @@ export class DatePickerComponent<D>
             const calendar = this._calendars.first;
             this._calendarComponent = calendar;
             setTimeout(() => {
+                if (this._calendarComponent) {
+                    this._focusTrapService?.pauseCurrentFocusTrap();
+                } else {
+                    this._focusTrapService?.unpauseCurrentFocusTrap();
+                }
                 calendar?.setCurrentlyDisplayed(this._calendarPendingDate);
                 calendar?.initialFocus();
             });

diff --git a/libs/core/src/lib/datetime-picker/datetime-picker.component.ts b/libs/core/src/lib/datetime-picker/datetime-picker.component.ts
@@ -33,7 +33,7 @@ import { InputGroupInputDirective } from '@fundamental-ngx/core/input-group';
 
 import { createMissingDateImplementationError } from './errors';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { DynamicComponentService, Nullable } from '@fundamental-ngx/cdk/utils';
+import { DynamicComponentService, FocusTrapService, Nullable } from '@fundamental-ngx/cdk/utils';
 import { FormStates } from '@fundamental-ngx/cdk/forms';
 import { DateTimePicker } from './datetime-picker.model';
 import { MobileModeConfig } from '@fundamental-ngx/core/mobile-mode';
@@ -369,18 +369,13 @@ export class DatetimePickerComponent<D>
     /** @hidden Reference to the inner calendar component. */
     @ViewChild(CalendarComponent, { static: false })
     private set _calendarCmp(calendar: CalendarComponent<D>) {
-        if (!this.isOpen) {
-            return;
-        }
-
-        calendar?.setCurrentlyDisplayed(this._calendarPendingDate);
-        calendar?.initialFocus();
+        setTimeout(() => {
+            calendar?.setCurrentlyDisplayed(this._calendarPendingDate);
+            calendar?.initialFocus();
+        });
         this._calendarComponent = calendar;
     }
 
-    /** @hidden */
-    _calendarComponent: CalendarComponent<D>;
-
     /** @hidden */
     @ViewChild('inputGroupComponent', {
         read: ElementRef
@@ -397,6 +392,9 @@ export class DatetimePickerComponent<D>
     @ViewChild('pickerTemplate')
     private readonly _pickerTemplate: TemplateRef<any>;
 
+    /** @hidden */
+    _calendarComponent: CalendarComponent<D>;
+
     /** @hidden */
     _message: string | null = null;
 
@@ -452,6 +450,11 @@ export class DatetimePickerComponent<D>
     /** @hidden */
     private readonly _dynamicComponentService = inject(DynamicComponentService);
 
+    /** @hidden */
+    private readonly _focusTrapService = inject(FocusTrapService, {
+        optional: true
+    });
+
     /** @hidden */
     private _mobileComponentRef: Nullable<ComponentRef<DatetimePickerMobileComponent<D>>>;
 
@@ -591,6 +594,7 @@ export class DatetimePickerComponent<D>
     /** Opens the popover. */
     openPopover(): void {
         if (!this.isOpen && !this.disabled) {
+            this._focusTrapService?.pauseCurrentFocusTrap();
             this._showPopoverContents = true;
             this._changeDetRef.detectChanges();
             this.isOpen = true;
@@ -606,6 +610,7 @@ export class DatetimePickerComponent<D>
         this.onClose.emit();
         this.isOpen = false;
         this._onOpenStateChanged(this.isOpen);
+        this._focusTrapService?.unpauseCurrentFocusTrap();
         this.handleOnTouched();
     }