feat(react-utilities): use event.key for keyboard events (#19640)

* feat(react-utilities): Remove unused `@fluentui/keyboard-key` dependency * Change files * add keyboard-keys usage * update change file
microsoft · Sep 3, 2021 · cd22a60 · cd22a60
1 parent ed1de3a
commit cd22a60
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/change/@fluentui-react-utilities-48456c43-4765-4fb8-9154-794fcfd01fa6.json b/change/@fluentui-react-utilities-48456c43-4765-4fb8-9154-794fcfd01fa6.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat(react-utilities): use `event.key` for keyboard events",
+  "packageName": "@fluentui/react-utilities",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-utilities/package.json b/packages/react-utilities/package.json
@@ -37,7 +37,7 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/keyboard-key": "^0.3.4",
+    "@fluentui/keyboard-keys": "^9.0.0-alpha.3",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

diff --git a/packages/react-utilities/src/utils/shouldPreventDefaultOnKeyDown.ts b/packages/react-utilities/src/utils/shouldPreventDefaultOnKeyDown.ts
@@ -1,4 +1,4 @@
-import { getCode, SpacebarKey, EnterKey } from '@fluentui/keyboard-key';
+import { Space, Enter } from '@fluentui/keyboard-keys';
 import * as React from 'react';
 
 /**
@@ -7,13 +7,13 @@ import * as React from 'react';
  * Useful for situations where a keydown needs to be transformed to a click event
  */
 export function shouldPreventDefaultOnKeyDown(e: KeyboardEvent | React.KeyboardEvent) {
-  const code = getCode(e);
+  const key = e.key;
   const target: HTMLElement | undefined = e.target as HTMLElement;
 
-  const matchesByKey = code === SpacebarKey || code === EnterKey;
+  const matchesByKey = key === Space || key === Enter;
 
   if (target?.tagName === 'A') {
-    return code === SpacebarKey;
+    return key === Space;
   }
 
   const ignoredByTag =