fix(slider): don't handle keyboard events with modifier keys (#14675)

No longer prevents the default actions and changes the model value when handling a keyboard event with a modifier.

Author: crisbeto

src/lib/slider/slider.spec.ts

@@ -16,6 +16,7 @@ import {
   dispatchFakeEvent,
   dispatchKeyboardEvent,
   dispatchMouseEvent,
+  createKeyboardEvent,
 } from '@angular/cdk/testing';
 import {Component, DebugElement, Type, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
@@ -995,7 +996,7 @@ describe('MatSlider', () => {
       expect(sliderInstance.value).toBe(0);
     });
 
-    it(`should take not action for presses of keys it doesn't care about`, () => {
+    it(`should take no action for presses of keys it doesn't care about`, () => {
       sliderInstance.value = 50;
 
       expect(testComponent.onChange).not.toHaveBeenCalled();
@@ -1008,6 +1009,26 @@ describe('MatSlider', () => {
       expect(testComponent.onChange).not.toHaveBeenCalled();
       expect(sliderInstance.value).toBe(50);
     });
+
+    it('should ignore events modifier keys', () => {
+      sliderInstance.value = 0;
+
+      [
+        UP_ARROW, DOWN_ARROW, RIGHT_ARROW,
+        LEFT_ARROW, PAGE_DOWN, PAGE_UP, HOME, END
+      ].forEach(key => {
+        const event = createKeyboardEvent('keydown', key);
+        Object.defineProperty(event, 'altKey', {get: () => true});
+        dispatchEvent(sliderNativeElement, event);
+        fixture.detectChanges();
+        expect(event.defaultPrevented).toBe(false);
+      });
+
+      expect(testComponent.onInput).not.toHaveBeenCalled();
+      expect(testComponent.onChange).not.toHaveBeenCalled();
+      expect(sliderInstance.value).toBe(0);
+    });
+
   });
 
   describe('slider with direction and invert', () => {

src/lib/slider/slider.ts

@@ -18,6 +18,7 @@ import {
   PAGE_UP,
   RIGHT_ARROW,
   UP_ARROW,
+  hasModifierKey,
 } from '@angular/cdk/keycodes';
 import {
   Attribute,
@@ -582,9 +583,11 @@ export class MatSlider extends _MatSliderMixinBase
   }
 
   _onKeydown(event: KeyboardEvent) {
-    if (this.disabled) { return; }
+    if (this.disabled || hasModifierKey(event)) {
+      return;
+    }
 
-    let oldValue = this.value;
+    const oldValue = this.value;
 
     switch (event.keyCode) {
       case PAGE_UP: