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 @@

Single selection with custom clear icon

- + delete 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 16f1526..c4f248a 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 { animate, state, style, transition, trigger } from '@angular/animations'; import { ViewportRuler } from '@angular/cdk/scrolling'; import { Subject } from 'rxjs'; @@ -150,6 +150,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; @@ -331,7 +337,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(); } } @@ -492,9 +500,9 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni const searchInputHeight = this.innerSelectSearch.nativeElement.offsetHeight const amountOfVisibleOptions = Math.floor((SELECT_PANEL_MAX_HEIGHT - searchInputHeight) / matOptionHeight); - + const indexOfFirstVisibleOption = Math.round((currentScrollTop + searchInputHeight) / matOptionHeight) - 1; - + if (indexOfFirstVisibleOption >= indexOfOptionToFitIntoView) { this.matSelect.panel.nativeElement.scrollTop = indexOfOptionToFitIntoView * matOptionHeight; } else if (indexOfFirstVisibleOption + amountOfVisibleOptions <= indexOfOptionToFitIntoView) {