From ca3a64817d5e5d7755a42cdd63037735ad237a7a Mon Sep 17 00:00:00 2001
From: Esteban Marin <esteban.marin@bithost.ch>
Date: Thu, 21 Mar 2019 17:07:47 +0100
Subject: [PATCH] #43: allow disabling propagation of home / end key

---
 README.md                                          |  6 ++++++
 .../custom-clear-icon-example.component.html       |  2 +-
 .../mat-select-search.component.ts                 | 14 +++++++++++---
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 920ae12..1d1b040 100644
--- a/README.md
+++ b/README.md
@@ -104,6 +104,12 @@ Furthermore, it provides the following inputs:
   
   /** Disables initial focusing of the input field */
   @Input() disableInitialFocus = false;
+    
+  /**
+   * Prevents home / end key being propagated to mat-select,
+   * allowing to move the cursor within the search input instead of navigating the options
+   */
+  @Input() preventHomeEndKeyPropagation = false;
 ```
 
 #### Customize clear icon
diff --git a/src/app/examples/03-custom-clear-icon-example/custom-clear-icon-example.component.html b/src/app/examples/03-custom-clear-icon-example/custom-clear-icon-example.component.html
index e540592..551d6c3 100644
--- a/src/app/examples/03-custom-clear-icon-example/custom-clear-icon-example.component.html
+++ b/src/app/examples/03-custom-clear-icon-example/custom-clear-icon-example.component.html
@@ -2,7 +2,7 @@ <h3>Single selection with custom clear icon</h3>
 <p>
   <mat-form-field>
     <mat-select [formControl]="bankCtrl" placeholder="Bank" #singleSelect>
-      <ngx-mat-select-search *ngIf="true" [formControl]="bankFilterCtrl">
+      <ngx-mat-select-search *ngIf="true" [formControl]="bankFilterCtrl" [preventHomeEndKeyPropagation]="true">
         <mat-icon ngxMatSelectSearchClear>delete</mat-icon>
       </ngx-mat-select-search>
       <mat-option *ngFor="let bank of filteredBanks | async" [value]="bank">
diff --git a/src/app/mat-select-search/mat-select-search.component.ts b/src/app/mat-select-search/mat-select-search.component.ts
index 4e0f7bc..173049c 100755
--- a/src/app/mat-select-search/mat-select-search.component.ts
+++ b/src/app/mat-select-search/mat-select-search.component.ts
@@ -19,8 +19,8 @@ import {
   Z,
   ZERO,
   NINE,
-  SPACE,
-} from '@angular/cdk/keycodes';
+  SPACE, END, HOME,
+} from "@angular/cdk/keycodes";
 import { Subject } from 'rxjs';
 import {delay, take, takeUntil} from 'rxjs/operators';
 import { MatSelectSearchClearDirective } from './mat-select-search-clear.directive';
@@ -135,6 +135,12 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
   /** Disables initial focusing of the input field */
   @Input() disableInitialFocus = false;
 
+  /**
+   * Prevents home / end key being propagated to mat-select,
+   * allowing to move the cursor within the search input instead of navigating the options
+   */
+  @Input() preventHomeEndKeyPropagation = false;
+
   /** Reference to the search input field */
   @ViewChild('searchSelectInput', {read: ElementRef}) searchSelectInput: ElementRef;
 
@@ -297,7 +303,9 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
   if ((event.key && event.key.length === 1) ||
     (event.keyCode >= A && event.keyCode <= Z) ||
     (event.keyCode >= ZERO && event.keyCode <= NINE) ||
-    (event.keyCode === SPACE)) {
+    (event.keyCode === SPACE)
+    || (this.preventHomeEndKeyPropagation && (event.keyCode === HOME || event.keyCode === END))
+  ) {
       event.stopPropagation();
     }
   }