fix: stop opening pickers on input click (#3210)

SAP · Sep 9, 2020 · 8e9cc0a · 8e9cc0a
1 parent cd4932d
commit 8e9cc0a
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 23 deletions.
diff --git a/libs/core/src/lib/date-picker/date-picker.component.html b/libs/core/src/lib/date-picker/date-picker.component.html
@@ -20,7 +20,6 @@
                 [attr.aria-label]="dateInputLabel"
                 [(ngModel)]="inputFieldDate"
                 (ngModelChange)="handleInputChange($event)"
-                (click)="openCalendar()"
             />
             <span fd-input-group-addon [button]="true" [compact]="compact">
                 <button

diff --git a/libs/core/src/lib/datetime-picker/datetime-picker.component.html b/libs/core/src/lib/datetime-picker/datetime-picker.component.html
@@ -1,8 +1,6 @@
 <div class="fd-datetime">
     <fd-popover
         [(isOpen)]="isOpen"
-        [closeOnOutsideClick]="false"
-        [closeOnEscapeKey]="false"
         [focusTrapped]="true"
         [triggers]="[]"
         [disabled]="disabled"
@@ -19,7 +17,6 @@
                     [(ngModel)]="inputFieldDate"
                     (ngModelChange)="handleInputChange($event)"
                     [placeholder]="placeholder"
-                    (click)="openPopover()"
                     [compact]="compact"
                     [ngClass]="{ 'is-error': isInvalidDateInput && useValidation }"
                     [disabled]="disabled"

diff --git a/libs/core/src/lib/datetime-picker/datetime-picker.component.ts b/libs/core/src/lib/datetime-picker/datetime-picker.component.ts
@@ -27,8 +27,8 @@ import { DatePipe } from '@angular/common';
 import { CalendarYearGrid, SpecialDayRule } from '../..';
 import { PopoverComponent } from '../popover/popover.component';
 import { PopoverBodyComponent } from '../popover/popover-body/popover-body.component';
-import { Subject, Subscription } from 'rxjs';
-import { delay, filter, first, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { delay, first, takeUntil } from 'rxjs/operators';
 
 /**
  * The datetime picker component is an opinionated composition of the fd-popover,
@@ -370,20 +370,6 @@ export class DatetimePickerComponent implements OnInit, OnDestroy, ControlValueA
         this.isInvalidDateInput = e;
     }
 
-    /** @hidden */
-    @HostListener('document:keydown.escape', [])
-    onEscapeKeydownHandler(): void {
-        this.closePopover();
-    }
-
-    /** @hidden */
-    @HostListener('document:click', ['$event'])
-    public onGlobalClick(event: MouseEvent): void {
-        if (!this._elRef.nativeElement.contains(event.target) && !this.popoverBodyComponent.elRef.nativeElement.contains(event.target)) {
-            this.closePopover();
-        }
-    }
-
     /** @hidden */
     registerOnChange(fn: (selected: any) => { void }): void {
         this.onChange = fn;

diff --git a/libs/core/src/lib/time-picker/time-picker.component.html b/libs/core/src/lib/time-picker/time-picker.component.html
@@ -26,7 +26,6 @@
                 [placeholder]="placeholder"
                 [attr.aria-label]="timePickerInputLabel"
                 (keyup.enter)="timeInputChanged($event.currentTarget.value)"
-                (click)="inputGroupClicked($event)"
             />
         </fd-input-group>
     </fd-popover-control>

diff --git a/libs/core/src/lib/time-picker/time-picker.component.ts b/libs/core/src/lib/time-picker/time-picker.component.ts
@@ -17,8 +17,8 @@ import { TimeFormatParser } from './format/time-parser';
 import { FormStates } from '../form/form-control/form-states';
 import { PopoverComponent } from '../popover/popover.component';
 import { Placement } from 'popper.js';
-import { Subject, Subscription } from 'rxjs';
-import { delay, filter, first, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { delay, first, takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'fd-time-picker',