fix(slider): Properly handle arrow key events in IE (#1613)

Author: anton-kachurin

packages/mdc-slider/foundation.js

@@ -312,35 +312,32 @@ export default class MDCSliderFoundation extends MDCFoundation {
   }
 
   getKeyId_(kbdEvt) {
-    switch (kbdEvt.key || kbdEvt.keyCode) {
-    case KEY_IDS.ARROW_LEFT:
-    case 37:
+    if (kbdEvt.key === KEY_IDS.ARROW_LEFT || kbdEvt.keyCode === 37) {
       return KEY_IDS.ARROW_LEFT;
-    case KEY_IDS.ARROW_RIGHT:
-    case 39:
+    }
+    if (kbdEvt.key === KEY_IDS.ARROW_RIGHT || kbdEvt.keyCode === 39) {
       return KEY_IDS.ARROW_RIGHT;
-    case KEY_IDS.ARROW_UP:
-    case 38:
+    }
+    if (kbdEvt.key === KEY_IDS.ARROW_UP || kbdEvt.keyCode === 38) {
       return KEY_IDS.ARROW_UP;
-    case KEY_IDS.ARROW_DOWN:
-    case 40:
+    }
+    if (kbdEvt.key === KEY_IDS.ARROW_DOWN || kbdEvt.keyCode === 40) {
       return KEY_IDS.ARROW_DOWN;
-    case KEY_IDS.HOME:
-    case 36:
+    }
+    if (kbdEvt.key === KEY_IDS.HOME || kbdEvt.keyCode === 36) {
       return KEY_IDS.HOME;
-    case KEY_IDS.END:
-    case 35:
+    }
+    if (kbdEvt.key === KEY_IDS.END || kbdEvt.keyCode === 35) {
       return KEY_IDS.END;
-    case KEY_IDS.PAGE_UP:
-    case 33:
+    }
+    if (kbdEvt.key === KEY_IDS.PAGE_UP || kbdEvt.keyCode === 33) {
       return KEY_IDS.PAGE_UP;
-    case KEY_IDS.PAGE_DOWN:
-    case 34:
+    }
+    if (kbdEvt.key === KEY_IDS.PAGE_DOWN || kbdEvt.keyCode === 34) {
       return KEY_IDS.PAGE_DOWN;
-    default:
-      // Doesn't matter
-      return '';
     }
+
+    return '';
   }
 
   getValueForKeyId_(keyId) {

test/unit/mdc-slider/foundation-keyboard-events.test.js

@@ -125,6 +125,27 @@ test('on arrow left keydown works with keyCode', () => {
   raf.restore();
 });
 
+test('on arrow left keydown works with non-standard IE key propery backed with proper keyCode', () => {
+  const {foundation, mockAdapter, raf, rootHandlers} = setupTest();
+
+  td.when(mockAdapter.computeBoundingRect()).thenReturn({left: 0, width: 100});
+  foundation.init();
+  raf.flush();
+
+  foundation.setValue(50);
+  raf.flush();
+
+  rootHandlers.keydown(createFakeEvent({key: 'Left', keyCode: 37}));
+  raf.flush();
+
+  assert.equal(foundation.getValue(), 49);
+  td.verify(mockAdapter.setThumbContainerStyleProperty(TRANSFORM_PROP, 'translateX(49px) translateX(-50%)'));
+  td.verify(mockAdapter.setTrackStyleProperty(TRANSFORM_PROP, 'scaleX(0.49)'));
+
+  raf.restore();
+});
+
+
 test('on arrow up keydown prevents the default behavior', () => {
   const {foundation, mockAdapter, raf, rootHandlers} = setupTest();
   const evt = createFakeEvent({key: 'ArrowUp'});
@@ -202,6 +223,27 @@ test('on arrow up keydown works with keyCode', () => {
   raf.restore();
 });
 
+test('on arrow up keydown works with non-standard IE key propery backed with proper keyCode', () => {
+  const {foundation, mockAdapter, raf, rootHandlers} = setupTest();
+
+  td.when(mockAdapter.computeBoundingRect()).thenReturn({left: 0, width: 100});
+  foundation.init();
+  raf.flush();
+
+  foundation.setValue(50);
+  raf.flush();
+
+  rootHandlers.keydown(createFakeEvent({key: 'Up', keyCode: 38}));
+  raf.flush();
+
+  assert.equal(foundation.getValue(), 51);
+  td.verify(mockAdapter.setThumbContainerStyleProperty(TRANSFORM_PROP, 'translateX(51px) translateX(-50%)'));
+  td.verify(mockAdapter.setTrackStyleProperty(TRANSFORM_PROP, 'scaleX(0.51)'));
+
+  raf.restore();
+});
+
+
 test('on arrow right keydown prevents the default behavior', () => {
   const {foundation, mockAdapter, raf, rootHandlers} = setupTest();
   const evt = createFakeEvent({key: 'ArrowRight'});
@@ -300,6 +342,27 @@ test('on arrow right keydown works with keyCode', () => {
   raf.restore();
 });
 
+test('on arrow right keydown works with non-standard IE key propery backed with proper keyCode', () => {
+  const {foundation, mockAdapter, raf, rootHandlers} = setupTest();
+
+  td.when(mockAdapter.computeBoundingRect()).thenReturn({left: 0, width: 100});
+  foundation.init();
+  raf.flush();
+
+  foundation.setValue(50);
+  raf.flush();
+
+  rootHandlers.keydown(createFakeEvent({key: 'Right', keyCode: 39}));
+  raf.flush();
+
+  assert.equal(foundation.getValue(), 51);
+  td.verify(mockAdapter.setThumbContainerStyleProperty(TRANSFORM_PROP, 'translateX(51px) translateX(-50%)'));
+  td.verify(mockAdapter.setTrackStyleProperty(TRANSFORM_PROP, 'scaleX(0.51)'));
+
+  raf.restore();
+});
+
+
 test('on arrow down keydown prevents the default behavior', () => {
   const {foundation, mockAdapter, raf, rootHandlers} = setupTest();
   const evt = createFakeEvent({key: 'ArrowDown'});
@@ -367,7 +430,7 @@ test('on arrow down keydown works with keyCode', () => {
   foundation.setValue(50);
   raf.flush();
 
-  rootHandlers.keydown(createFakeEvent({keyCode: 37}));
+  rootHandlers.keydown(createFakeEvent({keyCode: 40}));
   raf.flush();
 
   assert.equal(foundation.getValue(), 49);
@@ -377,6 +440,27 @@ test('on arrow down keydown works with keyCode', () => {
   raf.restore();
 });
 
+test('on arrow down keydown works with non-standard IE key propery backed with proper keyCode', () => {
+  const {foundation, mockAdapter, raf, rootHandlers} = setupTest();
+
+  td.when(mockAdapter.computeBoundingRect()).thenReturn({left: 0, width: 100});
+  foundation.init();
+  raf.flush();
+
+  foundation.setValue(50);
+  raf.flush();
+
+  rootHandlers.keydown(createFakeEvent({key: 'Down', keyCode: 40}));
+  raf.flush();
+
+  assert.equal(foundation.getValue(), 49);
+  td.verify(mockAdapter.setThumbContainerStyleProperty(TRANSFORM_PROP, 'translateX(49px) translateX(-50%)'));
+  td.verify(mockAdapter.setTrackStyleProperty(TRANSFORM_PROP, 'scaleX(0.49)'));
+
+  raf.restore();
+});
+
+
 test('on home keydown prevents default', () => {
   const {foundation, mockAdapter, raf, rootHandlers} = setupTest();
   const evt = createFakeEvent({key: 'Home'});
@@ -546,7 +630,7 @@ test('on page up keydown increases the slider by 4 * the step value when a step
   raf.restore();
 });
 
-test('on page up keydown works with keycode', () => {
+test('on page up keydown works with keyCode', () => {
   const {foundation, mockAdapter, raf, rootHandlers} = setupTest();
 
   td.when(mockAdapter.computeBoundingRect()).thenReturn({left: 0, width: 100});
@@ -623,7 +707,7 @@ test('on page down keydown increases the slider by 4 * the step value when a ste
   raf.restore();
 });
 
-test('on page down keydown works with keycode', () => {
+test('on page down keydown works with keyCode', () => {
   const {foundation, mockAdapter, raf, rootHandlers} = setupTest();
 
   td.when(mockAdapter.computeBoundingRect()).thenReturn({left: 0, width: 100});