feat(chips): Add keyCode support

PiperOrigin-RevId: 305483267
material-components · Apr 8, 2020 · 82fa986 · 82fa986
1 parent 5f24faa
commit 82fa986
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 41 deletions.
diff --git a/packages/mdc-chips/trailingaction/foundation.ts b/packages/mdc-chips/trailingaction/foundation.ts
@@ -22,8 +22,7 @@
  */
 
 import {MDCFoundation} from '@material/base/foundation';
-
-import {navigationKeys, strings as chipStrings} from '../chip/constants';
+import {isNavigationEvent, KEY, normalizeKey} from '@material/dom/keyboard';
 
 import {MDCChipTrailingActionAdapter} from './adapter';
 import {InteractionTrigger, strings} from './constants';
@@ -55,13 +54,15 @@ export class MDCChipTrailingActionFoundation extends
 
   handleKeydown(evt: KeyboardEvent) {
     evt.stopPropagation();
-    if (this.shouldNotifyInteraction_(evt)) {
-      this.adapter_.notifyInteraction(this.getTriggerFromKeyboard_(evt));
+    const key = normalizeKey(evt);
+    if (this.shouldNotifyInteractionFromKey_(key)) {
+      const trigger = this.getTriggerFromKey_(key);
+      this.adapter_.notifyInteraction(trigger);
       return;
     }
 
-    if (this.shouldNotifyNavigation_(evt)) {
-      this.adapter_.notifyNavigation(evt.key);
+    if (isNavigationEvent(evt)) {
+      this.adapter_.notifyNavigation(key);
       return;
     }
   }
@@ -79,35 +80,27 @@ export class MDCChipTrailingActionFoundation extends
     return this.adapter_.getAttribute(strings.ARIA_HIDDEN) !== 'true';
   }
 
-  private shouldNotifyInteraction_(evt: KeyboardEvent): boolean {
-    const isFromActionKey = evt.key === chipStrings.ENTER_KEY ||
-        evt.key === chipStrings.SPACEBAR_KEY;
-    const isFromDeleteKey = evt.key === chipStrings.BACKSPACE_KEY ||
-        evt.key === chipStrings.DELETE_KEY ||
-        evt.key === chipStrings.IE_DELETE_KEY;
+  private shouldNotifyInteractionFromKey_(key: string): boolean {
+    const isFromActionKey = key === KEY.ENTER || key === KEY.SPACEBAR;
+    const isFromDeleteKey = key === KEY.BACKSPACE || key === KEY.DELETE;
 
     return isFromActionKey || isFromDeleteKey;
   }
 
-  private shouldNotifyNavigation_(evt: KeyboardEvent): boolean {
-    return navigationKeys.has(evt.key);
-  }
-
-  private getTriggerFromKeyboard_(evt: KeyboardEvent): InteractionTrigger {
-    if (evt.key === chipStrings.SPACEBAR_KEY) {
+  private getTriggerFromKey_(key: string): InteractionTrigger {
+    if (key === KEY.SPACEBAR) {
       return InteractionTrigger.SPACEBAR_KEY;
     }
 
-    if (evt.key === chipStrings.ENTER_KEY) {
+    if (key === KEY.ENTER) {
       return InteractionTrigger.ENTER_KEY;
     }
 
-    if (evt.key === chipStrings.DELETE_KEY ||
-        evt.key === chipStrings.IE_DELETE_KEY) {
+    if (key === KEY.DELETE) {
       return InteractionTrigger.DELETE_KEY;
     }
 
-    if (evt.key === chipStrings.BACKSPACE_KEY) {
+    if (key === KEY.BACKSPACE) {
       return InteractionTrigger.BACKSPACE_KEY;
     }
 

diff --git a/packages/mdc-chips/trailingaction/test/foundation.test.ts b/packages/mdc-chips/trailingaction/test/foundation.test.ts
@@ -22,9 +22,10 @@
  */
 
 
+import {KEY} from '@material/dom/keyboard';
+
 import {verifyDefaultAdapter} from '../../../../testing/helpers/foundation';
 import {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../../testing/helpers/setup';
-import {strings as chipStrings} from '../../chip/constants';
 import {InteractionTrigger, strings} from '../constants';
 import {MDCChipTrailingActionFoundation} from '../foundation';
 
@@ -94,43 +95,35 @@ describe('MDCChipTrailingActionFoundation', () => {
   });
 
   [{
-    key: chipStrings.SPACEBAR_KEY,
+    key: KEY.SPACEBAR,
     trigger: InteractionTrigger.SPACEBAR_KEY,
   },
    {
-     key: chipStrings.ENTER_KEY,
+     key: KEY.ENTER,
      trigger: InteractionTrigger.ENTER_KEY,
    },
    {
-     key: chipStrings.BACKSPACE_KEY,
+     key: KEY.BACKSPACE,
      trigger: InteractionTrigger.BACKSPACE_KEY,
    },
    {
-     key: chipStrings.DELETE_KEY,
-     trigger: InteractionTrigger.DELETE_KEY,
-   },
-   {
-     key: chipStrings.IE_DELETE_KEY,
+     key: KEY.DELETE,
      trigger: InteractionTrigger.DELETE_KEY,
    }].forEach(({key, trigger}) => {
-    it(`#handleKeydown notifies interaction on "${key}" with "${trigger}"`,
+    it(`#handleKeydown notifies interaction on key "${key}" with "${trigger}"`,
        () => {
          const {foundation, mockAdapter} = setupTest();
          foundation.handleKeydown(mockKeyDown(key));
          expect(mockAdapter.notifyInteraction).toHaveBeenCalledWith(trigger);
        });
   });
 
-  [chipStrings.ARROW_UP_KEY,
-   chipStrings.ARROW_DOWN_KEY,
-   chipStrings.ARROW_RIGHT_KEY,
-   chipStrings.ARROW_LEFT_KEY,
-   chipStrings.IE_ARROW_UP_KEY,
-   chipStrings.IE_ARROW_DOWN_KEY,
-   chipStrings.IE_ARROW_RIGHT_KEY,
-   chipStrings.IE_ARROW_LEFT_KEY,
+  [KEY.ARROW_UP,
+   KEY.ARROW_DOWN,
+   KEY.ARROW_RIGHT,
+   KEY.ARROW_LEFT,
   ].forEach((key) => {
-    it(`#handleKeydown notifies navigation on "${key}" key down`, () => {
+    it(`#handleKeydown notifies navigation on key "${key}" keydown`, () => {
       const {foundation, mockAdapter} = setupTest();
       foundation.handleKeydown(mockKeyDown(key));
       expect(mockAdapter.notifyNavigation).toHaveBeenCalledWith(key);