Feature/484/deprecated keyboard event key code (#485)

* change of the _handleKeyDown first only characters and number's (#484) * change of the special character (#484) * simplified the expression (#484) * remove of unused imports (#484) * changed the keyCode -> key (#484) * change of the _handleKeyDown first only characters and number's (#484) * change of the special character (#484) * simplified the expression (#484) * remove of unused imports (#484) * changed the keyCode -> key (#484) * Applied feedback (#484) * Update src/app/mat-select-search/mat-select-search.component.ts * Update src/app/mat-select-search/mat-select-search.component.ts * Applied fix for linter (#484) --------- Co-authored-by: Esteban Gehring <[email protected]> Co-authored-by: Esteban Gehring <[email protected]>
bithost-gmbh · Sep 4, 2024 · b85fe5c · b85fe5c
1 parent 95a402a
commit b85fe5c
Showing 1 changed file with 8 additions and 9 deletions.
diff --git a/src/app/mat-select-search/mat-select-search.component.ts b/src/app/mat-select-search/mat-select-search.component.ts
@@ -5,7 +5,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { A, DOWN_ARROW, END, ENTER, ESCAPE, HOME, NINE, SPACE, UP_ARROW, Z, ZERO } from '@angular/cdk/keycodes';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import {
   ChangeDetectionStrategy,
@@ -428,22 +427,22 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, ControlValue
    */
   _handleKeydown(event: KeyboardEvent) {
     // Prevent propagation for all alphanumeric characters in order to avoid selection issues
-    if ((event.key && event.key.length === 1) ||
-      (event.keyCode >= A && event.keyCode <= Z) ||
-      (event.keyCode >= ZERO && event.keyCode <= NINE) ||
-      (event.keyCode === SPACE)
-      || (this.preventHomeEndKeyPropagation && (event.keyCode === HOME || event.keyCode === END))
+
+    // tslint:disable-next-line:max-line-length
+    // Needed to avoid handling in https://github.com/angular/components/blob/5439460d1fe166f8ec34ab7d48f05e0dd7f6a946/src/material/select/select.ts#L965
+    if ((event.key && event.key.length === 1)
+      || (this.preventHomeEndKeyPropagation && (event.key === 'Home' || event.key === 'End'))
     ) {
       event.stopPropagation();
     }
 
-    if (this.matSelect.multiple && event.key && event.keyCode === ENTER) {
+    if (this.matSelect.multiple && event.key && event.key === 'Enter') {
       // Regain focus after multiselect, so we can further type
       setTimeout(() => this._focus());
     }
 
     // Special case if click Escape, if input is empty, close the dropdown, if not, empty out the search field
-    if (this.enableClearOnEscapePressed === true && event.keyCode === ESCAPE && this.value) {
+    if (this.enableClearOnEscapePressed && event.key === 'Escape' && this.value) {
       this._reset(true);
       event.stopPropagation();
     }
@@ -454,7 +453,7 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, ControlValue
    * Allows e.g. the announcing of the currently activeDescendant by screen readers.
    */
   _handleKeyup(event: KeyboardEvent) {
-    if (event.keyCode === UP_ARROW || event.keyCode === DOWN_ARROW) {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       const ariaActiveDescendantId = this.matSelect._getAriaActiveDescendant();
       const index = this._options.toArray().findIndex(item => item.id === ariaActiveDescendantId);
       if (index !== -1) {