fix: fix the edge mis trigger (#1092)

react-component · Dec 5, 2024 · a040910 · a040910
1 parent 35546c0
commit a040910
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 30 deletions.
diff --git a/src/utils/keyUtil.ts b/src/utils/keyUtil.ts
@@ -2,33 +2,39 @@ import KeyCode from 'rc-util/lib/KeyCode';
 
 /** keyCode Judgment function */
 export function isValidateOpenKey(currentKeyCode: number): boolean {
-  return ![
-    // System function button
-    KeyCode.ESC,
-    KeyCode.SHIFT,
-    KeyCode.BACKSPACE,
-    KeyCode.TAB,
-    KeyCode.WIN_KEY,
-    KeyCode.ALT,
-    KeyCode.META,
-    KeyCode.WIN_KEY_RIGHT,
-    KeyCode.CTRL,
-    KeyCode.SEMICOLON,
-    KeyCode.EQUALS,
-    KeyCode.CAPS_LOCK,
-    KeyCode.CONTEXT_MENU,
-    // F1-F12
-    KeyCode.F1,
-    KeyCode.F2,
-    KeyCode.F3,
-    KeyCode.F4,
-    KeyCode.F5,
-    KeyCode.F6,
-    KeyCode.F7,
-    KeyCode.F8,
-    KeyCode.F9,
-    KeyCode.F10,
-    KeyCode.F11,
-    KeyCode.F12,
-  ].includes(currentKeyCode);
+  return (
+    // Undefined for Edge bug:
+    // https://github.com/ant-design/ant-design/issues/51292
+    currentKeyCode &&
+    // Other keys
+    ![
+      // System function button
+      KeyCode.ESC,
+      KeyCode.SHIFT,
+      KeyCode.BACKSPACE,
+      KeyCode.TAB,
+      KeyCode.WIN_KEY,
+      KeyCode.ALT,
+      KeyCode.META,
+      KeyCode.WIN_KEY_RIGHT,
+      KeyCode.CTRL,
+      KeyCode.SEMICOLON,
+      KeyCode.EQUALS,
+      KeyCode.CAPS_LOCK,
+      KeyCode.CONTEXT_MENU,
+      // F1-F12
+      KeyCode.F1,
+      KeyCode.F2,
+      KeyCode.F3,
+      KeyCode.F4,
+      KeyCode.F5,
+      KeyCode.F6,
+      KeyCode.F7,
+      KeyCode.F8,
+      KeyCode.F9,
+      KeyCode.F10,
+      KeyCode.F11,
+      KeyCode.F12,
+    ].includes(currentKeyCode)
+  );
 }
diff --git a/tests/Accessibility.test.tsx b/tests/Accessibility.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import Select from '../src';
 import { injectRunAllTimers, expectOpen, keyDown } from './utils/common';
-import { fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
 
 describe('Select.Accessibility', () => {
   injectRunAllTimers(jest);
@@ -67,4 +67,39 @@ describe('Select.Accessibility', () => {
         .textContent,
     ).toEqual('Light');
   });
+
+  // https://github.com/ant-design/ant-design/issues/51292
+  it('edge bug', () => {
+    const { container } = render(
+      <Select
+        mode="combobox"
+        options={[
+          {
+            value: '123',
+          },
+          {
+            value: '1234',
+          },
+          {
+            value: '12345',
+          },
+        ]}
+        defaultValue="123"
+      />,
+    );
+
+    // Invalid key
+    keyDown(container.querySelector('input')!, undefined);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expectOpen(container, false);
+
+    // Valid key
+    keyDown(container.querySelector('input')!, KeyCode.A);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expectOpen(container);
+  });
 });
diff --git a/tests/utils/common.ts b/tests/utils/common.ts
@@ -101,6 +101,9 @@ export function injectRunAllTimers(jest: Jest) {
 
 export function keyDown(element: HTMLElement, keyCode: number) {
   const event = createEvent.keyDown(element, { keyCode });
+  Object.defineProperties(event, {
+    which: { get: () => keyCode },
+  });
 
   act(() => {
     fireEvent(element, event);