fix: listen for the meta press failure on the keyup event (alibaba#1968)

* fix: listen for the `meta` press failure on the keyup event

* refactor: adjust meta logic

* refactor: adjust logic

* test: add keyup test

Author: miracles1919

packages/hooks/src/useKeyPress/__tests__/index.test.tsx

@@ -72,4 +72,15 @@ describe('useKeyPress ', () => {
     expect(callback.mock.calls.length).toBe(2);
     unmount();
   });
+
+  it('meta key should be work in keyup event', async () => {
+    renderHook(() =>
+      useKeyPress(['meta'], callback, {
+        events: ['keyup'],
+      }),
+    );
+
+    fireEvent.keyUp(document, { key: 'meta', keyCode: 91, metaKey: false });
+    expect(callback).toBeCalled();
+  });
 });

packages/hooks/src/useKeyPress/index.ts

@@ -3,6 +3,7 @@ import { isFunction, isNumber, isString } from '../utils';
 import type { BasicTarget } from '../utils/domTarget';
 import { getTargetElement } from '../utils/domTarget';
 import useDeepCompareEffectWithTarget from '../utils/useDeepCompareWithTarget';
+import isAppleDevice from '../utils/isAppleDevice';
 
 export type KeyPredicate = (event: KeyboardEvent) => boolean;
 export type keyType = number | string;
@@ -122,12 +123,23 @@ const aliasKeyCodeMap = {
   singlequote: 222,
 };
 
+if (isAppleDevice) {
+  aliasKeyCodeMap['meta'] = [91, 93];
+} else {
+  aliasKeyCodeMap['meta'] = [91, 92];
+}
+
 // 修饰键
 const modifierKey = {
   ctrl: (event: KeyboardEvent) => event.ctrlKey,
   shift: (event: KeyboardEvent) => event.shiftKey,
   alt: (event: KeyboardEvent) => event.altKey,
-  meta: (event: KeyboardEvent) => event.metaKey,
+  meta: (event: KeyboardEvent) => {
+    if (event.type === 'keyup') {
+      return aliasKeyCodeMap['meta'].includes(event.keyCode);
+    }
+    return event.metaKey;
+  },
 };
 
 // 根据 event 计算激活键数量
@@ -169,7 +181,7 @@ function genFilterKey(event: KeyboardEvent, keyFilter: keyType, exactMatch: bool
     // 组合键
     const genModifier = modifierKey[key];
     // keyCode 别名
-    const aliasKeyCode = aliasKeyCodeMap[key.toLowerCase()];
+    const aliasKeyCode: number | number[] = aliasKeyCodeMap[key.toLowerCase()];
 
     if ((genModifier && genModifier(event)) || (aliasKeyCode && aliasKeyCode === event.keyCode)) {
       genLen++;

packages/hooks/src/utils/isAppleDevice.ts

@@ -0,0 +1,5 @@
+const isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(
+  typeof navigator !== 'undefined' ? navigator?.platform : '',
+);
+
+export default isAppleDevice;