fix(dropdown): fix dropdown and overlaylist propagating escape event …

…when dropdown is opened
TemainfoSoftware · Aug 7, 2019 · 0b9211d · 0b9211d
1 parent 57229fa
commit 0b9211d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/projects/truly-ui/src/components/dropdownlist/dropdownlist.html b/projects/truly-ui/src/components/dropdownlist/dropdownlist.html
@@ -40,6 +40,7 @@
       @overlay
       (selectOption)="onSelectOption($event)"
       (search)="onSearch($event)"
+      (close)="handleCloseDropdown()"
       (defaultOption)="onDefaultOption()"
       (findByLetter)="onFindByLetter($event)"
       [customInput]="input"

diff --git a/projects/truly-ui/src/components/dropdownlist/dropdownlist.ts b/projects/truly-ui/src/components/dropdownlist/dropdownlist.ts
@@ -245,6 +245,11 @@ export class TlDropDownList extends ValueAccessorBase<any> implements OnChanges,
     }
   }
 
+  handleCloseDropdown() {
+    this.isOpen = false;
+    this.setInputFocus();
+  }
+
   private setInputFocus() {
     this.input.nativeElement.focus();
   }

diff --git a/projects/truly-ui/src/components/overlaylist/overlay-list.html b/projects/truly-ui/src/components/overlaylist/overlay-list.html
@@ -3,6 +3,7 @@
     <div class="search-input" *ngIf="searchOnList && !customFocus">
       <tl-input
         (input)="handleInput($event)"
+        (keydown.escape)="handleEscape($event)"
         (keydown.ArrowUp)="keyManager.setPreviousItemActive(); handleScrollIntoView();"
         (keydown.ArrowDown)="keyManager.setNextItemActive(); handleScrollIntoView();"
         (keydown.enter)="emitSelectOption(); $event.preventDefault()">

diff --git a/projects/truly-ui/src/components/overlaylist/overlay-list.ts b/projects/truly-ui/src/components/overlaylist/overlay-list.ts
@@ -95,6 +95,8 @@ export class TlOverlayList implements OnInit, AfterViewInit, OnChanges, OnDestro
 
   @Output() findByLetter: EventEmitter<any> = new EventEmitter();
 
+  @Output() close: EventEmitter<any> = new EventEmitter();
+
   @ViewChild( 'list', {static: true} ) list: ElementRef;
 
   @ViewChild( TlInput, { static: false } ) tlInput: TlInput;
@@ -202,6 +204,11 @@ export class TlOverlayList implements OnInit, AfterViewInit, OnChanges, OnDestro
     }
   }
 
+  handleEscape($event) {
+    this.stopEvent( $event );
+    this.close.emit();
+  }
+
   handleInputFocus() {
     if (this.searchOnList && !this.customFocus) {
       setTimeout(() => {