fix(datepicker): corrige posicionamento do calendar

Corrige posicionamento do calendar do po-datepicker. fixes DTHFUI-10027
po-ui · Nov 8, 2024 · 61090da · 61090da
1 parent 6383469
commit 61090da
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 64 deletions.
diff --git a/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker-base.component.ts b/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker-base.component.ts
@@ -386,6 +386,21 @@ export abstract class PoDatepickerBaseComponent implements ControlValueAccessor,
     return this._locale || this.shortLanguage;
   }
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define que o calendário do DatePicker será incluído no body da página, em vez de suspenso junto ao campo de entrada do componente.
+   * Essa opção é útil em cenários onde o DatePicker precisa ser renderizado fora do conteúdo principal da página,
+   * como em formulários que utilizam scroll ou containers com overflow escondido.
+   *
+   * > Obs: O uso dessa propriedade pode interferir na sequência de tabulação da página, especialmente em formulários longos.
+   *
+   * @default `false`
+   */
+  @Input({ alias: 'p-append-in-body', transform: convertToBoolean }) appendBox: boolean = false;
+
   constructor(protected languageService: PoLanguageService) {}
 
   set date(value: any) {

diff --git a/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.html b/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.html
@@ -6,57 +6,76 @@
   [p-required]="required"
   [p-show-required]="showRequired"
 >
-  <div class="po-field-container-content po-field-container-content-datepicker">
-    <div class="po-field-container-input">
-      <input
-        #inp
-        class="po-input po-datepicker"
-        [class.po-input-icon-right]="clean && inp.value"
-        type="text"
-        [attr.name]="name"
-        [autocomplete]="autocomplete"
-        [disabled]="disabled"
-        [id]="id"
-        [placeholder]="disabled ? '' : placeholder"
-        [readonly]="readonly"
-        [required]="required"
-        (blur)="eventOnBlur($event)"
-        (click)="eventOnClick($event)"
-      />
-      <div class="po-field-icon-container-right">
-        <po-clean
-          class="po-icon-input"
-          *ngIf="clean && !disabled && !readonly"
-          [p-element-ref]="inputEl"
-          (p-change-event)="clear()"
-        >
-        </po-clean>
+  <div #outerContainer>
+    <div
+      cdkOverlayOrigin
+      #trigger="cdkOverlayOrigin"
+      class="po-field-container-content po-field-container-content-datepicker"
+    >
+      <div class="po-field-container-input">
+        <input
+          #inp
+          class="po-input po-datepicker"
+          [class.po-input-icon-right]="clean && inp.value"
+          type="text"
+          [attr.name]="name"
+          [autocomplete]="autocomplete"
+          [disabled]="disabled"
+          [id]="id"
+          [placeholder]="disabled ? '' : placeholder"
+          [readonly]="readonly"
+          [required]="required"
+          (blur)="eventOnBlur($event)"
+          (click)="eventOnClick($event)"
+        />
+        <div class="po-field-icon-container-right">
+          <po-clean
+            class="po-icon-input"
+            *ngIf="clean && !disabled && !readonly"
+            [p-element-ref]="inputEl"
+            (p-change-event)="clear()"
+          >
+          </po-clean>
+        </div>
       </div>
+      <po-button
+        #iconDatepicker
+        class="po-datepicker-button"
+        p-icon="ICON_CALENDAR"
+        p-kind="tertiary"
+        [p-disabled]="disabled || readonly"
+        (keydown)="onKeyPress($event)"
+        (p-click)="togglePicker()"
+      >
+      </po-button>
     </div>
-    <po-button
-      #iconDatepicker
-      class="po-datepicker-button"
-      p-icon="ICON_CALENDAR"
-      p-kind="tertiary"
-      [p-disabled]="disabled || readonly"
-      (keydown)="onKeyPress($event)"
-      (p-click)="togglePicker()"
-    >
-    </po-button>
-  </div>
 
-  <div #dialogPicker [class.po-datepicker-popup-calendar]="!verifyMobile()">
-    <div *ngIf="verifyMobile()" class="po-datepicker-calendar-overlay"></div>
-    <po-calendar
-      [class.po-datepicker-calendar-mobile]="verifyMobile()"
-      #calendar
-      [(ngModel)]="date"
-      [p-max-date]="maxDate"
-      [p-min-date]="minDate"
-      [p-locale]="locale"
-      (p-change)="dateSelected()"
-    >
-    </po-calendar>
+    <ng-container *ngIf="appendBox; then dropdownCDK; else dropdownDefault"> </ng-container>
+
+    <ng-template #sharedCalendarContent>
+      <div #dialogPicker [class.po-datepicker-popup-calendar]="!verifyMobile()">
+        <div *ngIf="verifyMobile()" class="po-datepicker-calendar-overlay"></div>
+        <po-calendar
+          [class.po-datepicker-calendar-mobile]="verifyMobile()"
+          #calendar
+          [(ngModel)]="date"
+          [p-max-date]="maxDate"
+          [p-min-date]="minDate"
+          [p-locale]="locale"
+          (p-change)="dateSelected()"
+        ></po-calendar>
+      </div>
+    </ng-template>
+
+    <ng-template #dropdownDefault>
+      <ng-container *ngTemplateOutlet="sharedCalendarContent"></ng-container>
+    </ng-template>
+
+    <ng-template #dropdownCDK>
+      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="true">
+        <ng-container *ngTemplateOutlet="sharedCalendarContent"></ng-container>
+      </ng-template>
+    </ng-template>
   </div>
 
   <po-field-container-bottom

diff --git a/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.spec.ts b/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.spec.ts
@@ -931,6 +931,10 @@ describe('PoDatepickerComponent:', () => {
     });
 
     it(`setCalendarPosition: should call 'controlPosition.setElements' and 'controlPosition.adjustPosition'.`, () => {
+      component.dialogPicker = {
+        nativeElement: document.createElement('div')
+      };
+
       const setDialogPickerStyleDisplay = spyOn(component, <any>'setDialogPickerStyleDisplay');
       const setElements = spyOn(component['controlPosition'], 'setElements');
       const adjustPosition = spyOn(component['controlPosition'], 'adjustPosition');
@@ -958,6 +962,10 @@ describe('PoDatepickerComponent:', () => {
     });
 
     it('setDialogPickerStyleDisplay: should change style display.', () => {
+      component.dialogPicker = {
+        nativeElement: document.createElement('div')
+      };
+
       component['setDialogPickerStyleDisplay']('none');
       expect(component.dialogPicker.nativeElement.style.display).toBe('none');
 

diff --git a/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.ts b/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.ts
@@ -79,7 +79,7 @@ const poCalendarPositionDefault = 'bottom-left';
 })
 export class PoDatepickerComponent extends PoDatepickerBaseComponent implements AfterViewInit, OnDestroy {
   @ViewChild('calendar', { static: true }) calendar: PoCalendarComponent;
-  @ViewChild('dialogPicker', { read: ElementRef, static: true }) dialogPicker: ElementRef;
+  @ViewChild('dialogPicker', { read: ElementRef, static: false }) dialogPicker: ElementRef;
   @ViewChild('iconDatepicker') iconDatepicker: PoButtonComponent;
   @ViewChild('inp', { read: ElementRef, static: true }) inputEl: ElementRef;
 
@@ -434,22 +434,24 @@ export class PoDatepickerComponent extends PoDatepickerBaseComponent implements
     window.removeEventListener('scroll', this.onScroll, true);
   }
 
-  private setDialogPickerStyleDisplay(value) {
-    this.dialogPicker.nativeElement.style.display = value;
+  private setDialogPickerStyleDisplay(value: string): void {
+    if (this.dialogPicker && this.dialogPicker.nativeElement) {
+      this.dialogPicker.nativeElement.style.display = value;
+    }
   }
 
-  private setCalendarPosition() {
+  private setCalendarPosition(): void {
     this.setDialogPickerStyleDisplay('block');
-
-    this.controlPosition.setElements(
-      this.dialogPicker.nativeElement,
-      poCalendarContentOffset,
-      this.inputEl,
-      ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
-      false,
-      true
-    );
-
-    this.controlPosition.adjustPosition(poCalendarPositionDefault);
+    if (this.dialogPicker && this.dialogPicker.nativeElement) {
+      this.controlPosition.setElements(
+        this.dialogPicker.nativeElement,
+        poCalendarContentOffset,
+        this.inputEl,
+        ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
+        false,
+        true
+      );
+      this.controlPosition.adjustPosition(poCalendarPositionDefault);
+    }
   }
 }
diff --git a/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.module.ts b/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.module.ts
@@ -8,14 +8,23 @@ import { PoCleanModule } from '../po-clean/po-clean.module';
 import { PoButtonModule } from '../../po-button';
 
 import { PoDatepickerComponent } from './po-datepicker.component';
+import { OverlayModule } from '@angular/cdk/overlay';
 
 /**
  * @description
  *
  * Módulo do componente `po-datepicker`.
  */
 @NgModule({
-  imports: [CommonModule, FormsModule, PoFieldContainerModule, PoCleanModule, PoCalendarModule, PoButtonModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    PoFieldContainerModule,
+    OverlayModule,
+    PoCleanModule,
+    PoCalendarModule,
+    PoButtonModule
+  ],
   exports: [PoDatepickerComponent],
   declarations: [PoDatepickerComponent]
 })