From 343cacf5cce8e993d144c9da690463c2d9726b58 Mon Sep 17 00:00:00 2001
From: qiang <qw13131wang@gmail.com>
Date: Thu, 14 Nov 2024 21:14:51 +0800
Subject: [PATCH] fix(components): numpadEnter does not work like the Enter
 (#18855)

---
 .../vitepress/components/vp-app.vue           |   3 +-
 .../vitepress/components/vp-demo.vue          |   7 +-
 .../components/cascader-panel/src/index.vue   |   1 +
 packages/components/cascader/src/cascader.vue |   2 +
 .../color-picker/src/color-picker.vue         |   1 +
 .../dropdown/src/dropdown-item-impl.vue       |   7 +-
 packages/components/dropdown/src/dropdown.vue |   7 +-
 .../components/dropdown/src/useDropdown.ts    |   2 +-
 .../focus-trap/__tests__/focus-trap.test.ts   |  28 ++---
 .../components/focus-trap/src/focus-trap.vue  |   4 +-
 packages/components/mention/src/mention.vue   | 103 ++++++++++--------
 .../components/menu/src/utils/menu-item.ts    |   1 +
 packages/components/menu/src/utils/submenu.ts |   1 +
 .../__tests__/roving-focus-item.test.ts       |  10 +-
 .../roving-focus-group/__tests__/util.test.ts |  14 +--
 .../src/roving-focus-item.vue                 |   4 +-
 .../roving-focus-group/src/utils.ts           |   2 +-
 .../select-v2/src/select-dropdown.tsx         |  15 +--
 .../slider/__tests__/slider.test.tsx          |  18 +--
 .../src/composables/use-slider-button.ts      |  42 ++++---
 packages/components/tabs/src/tab-nav.tsx      |  58 +++++-----
 packages/components/tabs/src/tabs.tsx         |   3 +-
 packages/components/tooltip/src/trigger.ts    |   2 +-
 .../components/tree/src/model/useKeydown.ts   |   7 +-
 packages/hooks/use-escape-keydown/index.ts    |   5 +-
 25 files changed, 194 insertions(+), 153 deletions(-)

diff --git a/docs/.vitepress/vitepress/components/vp-app.vue b/docs/.vitepress/vitepress/components/vp-app.vue
index 6252d1b0a7..f2e6235b4a 100644
--- a/docs/.vitepress/vitepress/components/vp-app.vue
+++ b/docs/.vitepress/vitepress/components/vp-app.vue
@@ -4,6 +4,7 @@ import { onMounted } from 'vue'
 import nprogress from 'nprogress'
 // import dayjs from 'dayjs'
 import { isClient, useEventListener, useToggle } from '@vueuse/core'
+import { EVENT_CODE } from 'element-plus'
 import { useSidebar } from '../composables/sidebar'
 import { useToggleWidgets } from '../composables/toggle-widgets'
 // import { useLang } from '../composables/lang'
@@ -36,7 +37,7 @@ useToggleWidgets(isSidebarOpen, () => {
 
 useEventListener('keydown', (e) => {
   if (!isClient) return
-  if (e.key === 'Escape' && isSidebarOpen.value) {
+  if (e.code === EVENT_CODE.esc && isSidebarOpen.value) {
     toggleSidebar(false)
     document.querySelector<HTMLButtonElement>('.sidebar-button')?.focus()
   }
diff --git a/docs/.vitepress/vitepress/components/vp-demo.vue b/docs/.vitepress/vitepress/components/vp-demo.vue
index 3dc3a2157a..fe43126958 100644
--- a/docs/.vitepress/vitepress/components/vp-demo.vue
+++ b/docs/.vitepress/vitepress/components/vp-demo.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, toRef } from 'vue'
 import { isClient, useClipboard, useToggle } from '@vueuse/core'
+import { EVENT_CODE } from 'element-plus'
 import { CaretTop } from '@element-plus/icons-vue'
 import { useLang } from '../composables/lang'
 import { useSourceCode } from '../composables/source-code'
@@ -38,7 +39,11 @@ const onPlaygroundClick = () => {
 }
 
 const onSourceVisibleKeydown = (e: KeyboardEvent) => {
-  if (['Enter', 'Space'].includes(e.code)) {
+  if (
+    [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space].includes(
+      e.code
+    )
+  ) {
     e.preventDefault()
     toggleSourceVisible(false)
     sourceCodeRef.value?.focus()
diff --git a/packages/components/cascader-panel/src/index.vue b/packages/components/cascader-panel/src/index.vue
index 7b852cd647..a4e5df293f 100644
--- a/packages/components/cascader-panel/src/index.vue
+++ b/packages/components/cascader-panel/src/index.vue
@@ -324,6 +324,7 @@ export default defineComponent({
           break
         }
         case EVENT_CODE.enter:
+        case EVENT_CODE.numpadEnter:
           checkNode(target)
           break
       }
diff --git a/packages/components/cascader/src/cascader.vue b/packages/components/cascader/src/cascader.vue
index 7d8244aa74..dffa0ddd36 100644
--- a/packages/components/cascader/src/cascader.vue
+++ b/packages/components/cascader/src/cascader.vue
@@ -547,6 +547,7 @@ const handleKeyDown = (e: KeyboardEvent) => {
 
   switch (e.code) {
     case EVENT_CODE.enter:
+    case EVENT_CODE.numpadEnter:
       togglePopperVisible()
       break
     case EVENT_CODE.down:
@@ -611,6 +612,7 @@ const handleSuggestionKeyDown = (e: KeyboardEvent) => {
       break
     }
     case EVENT_CODE.enter:
+    case EVENT_CODE.numpadEnter:
       target.click()
       break
   }
diff --git a/packages/components/color-picker/src/color-picker.vue b/packages/components/color-picker/src/color-picker.vue
index 28ee6cd842..7ee8beb3c5 100644
--- a/packages/components/color-picker/src/color-picker.vue
+++ b/packages/components/color-picker/src/color-picker.vue
@@ -325,6 +325,7 @@ function handleEsc(event: KeyboardEvent) {
 function handleKeyDown(event: KeyboardEvent) {
   switch (event.code) {
     case EVENT_CODE.enter:
+    case EVENT_CODE.numpadEnter:
     case EVENT_CODE.space:
       event.preventDefault()
       event.stopPropagation()
diff --git a/packages/components/dropdown/src/dropdown-item-impl.vue b/packages/components/dropdown/src/dropdown-item-impl.vue
index 23c64fd9e5..b41ca584b5 100644
--- a/packages/components/dropdown/src/dropdown-item-impl.vue
+++ b/packages/components/dropdown/src/dropdown-item-impl.vue
@@ -89,8 +89,11 @@ export default defineComponent({
     })
 
     const handleKeydown = composeEventHandlers((e: KeyboardEvent) => {
-      const { code } = e
-      if (code === EVENT_CODE.enter || code === EVENT_CODE.space) {
+      if (
+        [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space].includes(
+          e.code
+        )
+      ) {
         e.preventDefault()
         e.stopImmediatePropagation()
         emit('clickimpl', e)
diff --git a/packages/components/dropdown/src/dropdown.vue b/packages/components/dropdown/src/dropdown.vue
index 19c176e912..2a2cb0a96a 100644
--- a/packages/components/dropdown/src/dropdown.vue
+++ b/packages/components/dropdown/src/dropdown.vue
@@ -148,7 +148,12 @@ export default defineComponent({
     const scrollbar = ref(null)
     const currentTabId = ref<string | null>(null)
     const isUsingKeyboard = ref(false)
-    const triggerKeys = [EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.down]
+    const triggerKeys = [
+      EVENT_CODE.enter,
+      EVENT_CODE.numpadEnter,
+      EVENT_CODE.space,
+      EVENT_CODE.down,
+    ]
 
     const wrapStyle = computed<CSSProperties>(() => ({
       maxHeight: addUnit(props.maxHeight),
diff --git a/packages/components/dropdown/src/useDropdown.ts b/packages/components/dropdown/src/useDropdown.ts
index 09cc2ac127..e0201bdd59 100644
--- a/packages/components/dropdown/src/useDropdown.ts
+++ b/packages/components/dropdown/src/useDropdown.ts
@@ -46,7 +46,7 @@ export const initDropdownDomEvent = (
       menuItems.value[0].focus()
       ev.preventDefault()
       ev.stopPropagation()
-    } else if (code === EVENT_CODE.enter) {
+    } else if ([EVENT_CODE.enter, EVENT_CODE.numpadEnter].includes(code)) {
       _instance.handleClick()
     } else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {
       _instance.hide()
diff --git a/packages/components/focus-trap/__tests__/focus-trap.test.ts b/packages/components/focus-trap/__tests__/focus-trap.test.ts
index 982bef1553..3919d7c1a2 100644
--- a/packages/components/focus-trap/__tests__/focus-trap.test.ts
+++ b/packages/components/focus-trap/__tests__/focus-trap.test.ts
@@ -141,7 +141,7 @@ describe('<ElFocusTrap', () => {
       expect(wrapper.emitted('release-requested')).toBeFalsy()
 
       focusContainer?.trigger('keydown', {
-        key: EVENT_CODE.esc,
+        code: EVENT_CODE.esc,
       })
 
       await nextTick()
@@ -155,7 +155,7 @@ describe('<ElFocusTrap', () => {
       await nextTick()
 
       focusContainer?.trigger('keydown', {
-        key: EVENT_CODE.esc,
+        code: EVENT_CODE.esc,
       })
 
       // Expect no emit if esc while layer paused
@@ -173,13 +173,13 @@ describe('<ElFocusTrap', () => {
 
       expect(wrapper.emitted('focusout-prevented')).toBeFalsy()
       await childComponent.trigger('keydown.shift', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
       })
       expect(document.activeElement).toBe(items.at(0)?.element)
       expect(wrapper.emitted('focusout-prevented')?.length).toBe(2)
       ;(items.at(2)?.element as HTMLElement).focus()
       await childComponent.trigger('keydown', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
       })
       expect(wrapper.emitted('focusout-prevented')?.length).toBe(4)
     })
@@ -203,14 +203,14 @@ describe('<ElFocusTrap', () => {
        */
       // when loop is off
       await childComponent.trigger('keydown.shift', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
       })
       expect(document.activeElement).toBe(items.at(0)?.element)
       ;(items.at(2)?.element as HTMLElement).focus()
       expect(document.activeElement).toBe(items.at(2)?.element)
 
       await childComponent.trigger('keydown', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
       })
       expect(document.activeElement).toBe(items.at(2)?.element)
 
@@ -220,12 +220,12 @@ describe('<ElFocusTrap', () => {
       })
 
       await childComponent.trigger('keydown', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
       })
       expect(document.activeElement).toBe(items.at(0)?.element)
 
       await childComponent.trigger('keydown.shift', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
       })
       expect(document.activeElement).toBe(items.at(2)?.element)
     })
@@ -239,7 +239,7 @@ describe('<ElFocusTrap', () => {
       expect(document.activeElement).toBe(focusComponent.element)
 
       await focusComponent.trigger('keydown', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
       })
       expect(document.activeElement).toBe(focusComponent.element)
     })
@@ -268,7 +268,7 @@ describe('<ElFocusTrap', () => {
       expect(document.activeElement).toBe(beforeTrap.element)
 
       await focusContainer.trigger('keydown', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
         preventDefault,
       })
       if (!isDefaultPrevented) {
@@ -278,7 +278,7 @@ describe('<ElFocusTrap', () => {
       expect(document.activeElement).toBe(items.at(0)?.element)
 
       await focusContainer.trigger('keydown', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
         preventDefault,
       })
       if (!isDefaultPrevented) {
@@ -303,7 +303,7 @@ describe('<ElFocusTrap', () => {
       expect(document.activeElement).toBe(items.at(0)?.element)
 
       await focusComponent.trigger('keydown.shift', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
       })
       expect(document.activeElement).toBe(items.at(2)?.element)
 
@@ -313,7 +313,7 @@ describe('<ElFocusTrap', () => {
       expect(document.activeElement).toBe(newFocusTrap.find('.item').element)
 
       await focusComponent.trigger('keydown', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
       })
       expect(document.activeElement).not.toBe(items.at(0)?.element)
       newFocusTrap.unmount()
@@ -322,7 +322,7 @@ describe('<ElFocusTrap', () => {
       expect(document.activeElement).toBe(items.at(2)?.element)
 
       await focusComponent.trigger('keydown', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
       })
       expect(document.activeElement).toBe(items.at(0)?.element)
     })
diff --git a/packages/components/focus-trap/src/focus-trap.vue b/packages/components/focus-trap/src/focus-trap.vue
index ed3039e8af..4935869421 100644
--- a/packages/components/focus-trap/src/focus-trap.vue
+++ b/packages/components/focus-trap/src/focus-trap.vue
@@ -85,10 +85,10 @@ export default defineComponent({
       if (!props.loop && !props.trapped) return
       if (focusLayer.paused) return
 
-      const { key, altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e
+      const { code, altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e
       const { loop } = props
       const isTabbing =
-        key === EVENT_CODE.tab && !altKey && !ctrlKey && !metaKey
+        code === EVENT_CODE.tab && !altKey && !ctrlKey && !metaKey
 
       const currentFocusingEl = document.activeElement
       if (isTabbing && currentFocusingEl) {
diff --git a/packages/components/mention/src/mention.vue b/packages/components/mention/src/mention.vue
index f03a1513df..7ff3dbf7d7 100644
--- a/packages/components/mention/src/mention.vue
+++ b/packages/components/mention/src/mention.vue
@@ -61,7 +61,7 @@ import { pick } from 'lodash-unified'
 import { useFocusController, useId, useNamespace } from '@element-plus/hooks'
 import ElInput, { inputProps } from '@element-plus/components/input'
 import ElTooltip from '@element-plus/components/tooltip'
-import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { useFormDisabled } from '@element-plus/components/form'
 import { isFunction } from '@element-plus/utils'
 import { mentionEmits, mentionProps } from './mention'
@@ -125,54 +125,63 @@ const handleInputChange = (value: string) => {
   syncAfterCursorMove()
 }
 
-const handleInputKeyDown = (e: KeyboardEvent | Event) => {
-  if (!('key' in e)) return
-  if (elInputRef.value?.isComposing) return
-  if (['ArrowLeft', 'ArrowRight'].includes(e.key)) {
-    syncAfterCursorMove()
-  } else if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
-    if (!visible.value) return
-    e.preventDefault()
-    const direction = e.key === 'ArrowUp' ? 'prev' : 'next'
-    dropdownRef.value?.navigateOptions(direction)
-  } else if (['Enter'].includes(e.key)) {
-    if (!visible.value) return
-    e.preventDefault()
-    if (dropdownRef.value?.hoverOption) {
-      dropdownRef.value?.selectHoverOption()
-    } else {
-      visible.value = false
-    }
-  } else if (['Escape'].includes(e.key)) {
-    if (!visible.value) return
-    e.preventDefault()
-    visible.value = false
-  } else if (['Backspace'].includes(e.key)) {
-    if (props.whole && mentionCtx.value) {
-      const { splitIndex, selectionEnd, pattern, prefixIndex, prefix } =
-        mentionCtx.value
-      const inputEl = getInputEl()
-      if (!inputEl) return
-      const inputValue = inputEl.value
-      const matchOption = props.options.find((item) => item.value === pattern)
-      const isWhole = isFunction(props.checkIsWhole)
-        ? props.checkIsWhole(pattern, prefix)
-        : matchOption
-      if (isWhole && splitIndex !== -1 && splitIndex + 1 === selectionEnd) {
-        e.preventDefault()
-        const newValue =
-          inputValue.slice(0, prefixIndex) + inputValue.slice(splitIndex + 1)
-        emit(UPDATE_MODEL_EVENT, newValue)
+const handleInputKeyDown = (event: KeyboardEvent | Event) => {
+  if (!('code' in event) || elInputRef.value?.isComposing) return
 
-        const newSelectionEnd = prefixIndex
-        nextTick(() => {
-          // input value is updated
-          inputEl.selectionStart = newSelectionEnd
-          inputEl.selectionEnd = newSelectionEnd
-          syncDropdownVisible()
-        })
+  switch (event.code) {
+    case EVENT_CODE.left:
+    case EVENT_CODE.right:
+      syncAfterCursorMove()
+      break
+    case EVENT_CODE.up:
+    case EVENT_CODE.down:
+      if (!visible.value) return
+      event.preventDefault()
+      dropdownRef.value?.navigateOptions(
+        event.code === EVENT_CODE.up ? 'prev' : 'next'
+      )
+      break
+    case EVENT_CODE.enter:
+    case EVENT_CODE.numpadEnter:
+      if (!visible.value) return
+      event.preventDefault()
+      if (dropdownRef.value?.hoverOption) {
+        dropdownRef.value?.selectHoverOption()
+      } else {
+        visible.value = false
+      }
+      break
+    case EVENT_CODE.esc:
+      if (!visible.value) return
+      event.preventDefault()
+      visible.value = false
+      break
+    case EVENT_CODE.backspace:
+      if (props.whole && mentionCtx.value) {
+        const { splitIndex, selectionEnd, pattern, prefixIndex, prefix } =
+          mentionCtx.value
+        const inputEl = getInputEl()
+        if (!inputEl) return
+        const inputValue = inputEl.value
+        const matchOption = props.options.find((item) => item.value === pattern)
+        const isWhole = isFunction(props.checkIsWhole)
+          ? props.checkIsWhole(pattern, prefix)
+          : matchOption
+        if (isWhole && splitIndex !== -1 && splitIndex + 1 === selectionEnd) {
+          event.preventDefault()
+          const newValue =
+            inputValue.slice(0, prefixIndex) + inputValue.slice(splitIndex + 1)
+          emit(UPDATE_MODEL_EVENT, newValue)
+
+          const newSelectionEnd = prefixIndex
+          nextTick(() => {
+            // input value is updated
+            inputEl.selectionStart = newSelectionEnd
+            inputEl.selectionEnd = newSelectionEnd
+            syncDropdownVisible()
+          })
+        }
       }
-    }
   }
 }
 
diff --git a/packages/components/menu/src/utils/menu-item.ts b/packages/components/menu/src/utils/menu-item.ts
index 5dc5aa415a..daf6696438 100644
--- a/packages/components/menu/src/utils/menu-item.ts
+++ b/packages/components/menu/src/utils/menu-item.ts
@@ -41,6 +41,7 @@ class MenuItem {
           break
         }
         case EVENT_CODE.enter:
+        case EVENT_CODE.numpadEnter:
         case EVENT_CODE.space: {
           prevDef = true
           ;(event.currentTarget as HTMLElement).click()
diff --git a/packages/components/menu/src/utils/submenu.ts b/packages/components/menu/src/utils/submenu.ts
index 3dcd1eba9b..9c34f862ee 100644
--- a/packages/components/menu/src/utils/submenu.ts
+++ b/packages/components/menu/src/utils/submenu.ts
@@ -47,6 +47,7 @@ class SubMenu {
             break
           }
           case EVENT_CODE.enter:
+          case EVENT_CODE.numpadEnter:
           case EVENT_CODE.space: {
             prevDef = true
             ;(event.currentTarget as HTMLElement).click()
diff --git a/packages/components/roving-focus-group/__tests__/roving-focus-item.test.ts b/packages/components/roving-focus-group/__tests__/roving-focus-item.test.ts
index 5cb8338645..26f7ad8f6c 100644
--- a/packages/components/roving-focus-group/__tests__/roving-focus-item.test.ts
+++ b/packages/components/roving-focus-group/__tests__/roving-focus-item.test.ts
@@ -149,34 +149,34 @@ describe('<ElRovingFocusItem />', () => {
       const firstDOMItem = DOMItems.at(0)
       expect(onItemShiftTab).not.toHaveBeenCalled()
       await firstDOMItem.trigger('keydown.shift', {
-        key: EVENT_CODE.tab,
+        code: EVENT_CODE.tab,
       })
       expect(items.at(0).emitted()).toHaveProperty('keydown')
       expect(onItemShiftTab).toHaveBeenCalled()
       // navigating clockwise
       expect(document.activeElement).toBe(document.body)
       await DOMItems.at(1).trigger('keydown', {
-        key: EVENT_CODE.down,
+        code: EVENT_CODE.down,
       })
       await nextTick()
       expect(document.activeElement).toStrictEqual(DOMItems.at(2).element)
 
       // navigate anticlockwise
       await DOMItems.at(1).trigger('keydown', {
-        key: EVENT_CODE.up,
+        code: EVENT_CODE.up,
       })
       await nextTick()
       expect(document.activeElement).toStrictEqual(DOMItems.at(0).element)
 
       // should be able to focus on the last element when press End
       await DOMItems.at(0).trigger('keydown', {
-        key: EVENT_CODE.end,
+        code: EVENT_CODE.end,
       })
       await nextTick()
       expect(document.activeElement).toStrictEqual(DOMItems.at(2).element)
 
       await DOMItems.at(0).trigger('keydown', {
-        key: EVENT_CODE.home,
+        code: EVENT_CODE.home,
       })
       await nextTick()
       expect(document.activeElement).toStrictEqual(DOMItems.at(0).element)
diff --git a/packages/components/roving-focus-group/__tests__/util.test.ts b/packages/components/roving-focus-group/__tests__/util.test.ts
index 25cbbed31c..0b30988dca 100644
--- a/packages/components/roving-focus-group/__tests__/util.test.ts
+++ b/packages/components/roving-focus-group/__tests__/util.test.ts
@@ -7,7 +7,7 @@ describe('util', () => {
     expect(
       Util.getFocusIntent(
         new KeyboardEvent('mousedown', {
-          key: EVENT_CODE.enter,
+          code: EVENT_CODE.enter,
         })
       )
     ).toBe(undefined)
@@ -15,7 +15,7 @@ describe('util', () => {
     expect(
       Util.getFocusIntent(
         new KeyboardEvent('mousedown', {
-          key: EVENT_CODE.left,
+          code: EVENT_CODE.left,
         })
       )
     ).toBe('prev')
@@ -23,7 +23,7 @@ describe('util', () => {
     expect(
       Util.getFocusIntent(
         new KeyboardEvent('mousedown', {
-          key: EVENT_CODE.left,
+          code: EVENT_CODE.left,
         }),
         'vertical'
       )
@@ -31,7 +31,7 @@ describe('util', () => {
     expect(
       Util.getFocusIntent(
         new KeyboardEvent('mousedown', {
-          key: EVENT_CODE.up,
+          code: EVENT_CODE.up,
         }),
         'horizontal'
       )
@@ -40,7 +40,7 @@ describe('util', () => {
     expect(
       Util.getFocusIntent(
         new KeyboardEvent('mousedown', {
-          key: EVENT_CODE.left,
+          code: EVENT_CODE.left,
         }),
         'horizontal',
         'rtl'
@@ -50,7 +50,7 @@ describe('util', () => {
     expect(
       Util.getFocusIntent(
         new KeyboardEvent('mousedown', {
-          key: EVENT_CODE.right,
+          code: EVENT_CODE.right,
         }),
         'horizontal',
         'rtl'
@@ -60,7 +60,7 @@ describe('util', () => {
     expect(
       Util.getFocusIntent(
         new KeyboardEvent('mousedown', {
-          key: EVENT_CODE.up,
+          code: EVENT_CODE.up,
         }),
         'vertical',
         'rtl'
diff --git a/packages/components/roving-focus-group/src/roving-focus-item.vue b/packages/components/roving-focus-group/src/roving-focus-item.vue
index 073f47195b..b8a7f33f88 100644
--- a/packages/components/roving-focus-group/src/roving-focus-item.vue
+++ b/packages/components/roving-focus-group/src/roving-focus-item.vue
@@ -87,8 +87,8 @@ export default defineComponent({
         emit('keydown', e)
       },
       (e) => {
-        const { key, shiftKey, target, currentTarget } = e as KeyboardEvent
-        if (key === EVENT_CODE.tab && shiftKey) {
+        const { code, shiftKey, target, currentTarget } = e as KeyboardEvent
+        if (code === EVENT_CODE.tab && shiftKey) {
           onItemShiftTab()
           return
         }
diff --git a/packages/components/roving-focus-group/src/utils.ts b/packages/components/roving-focus-group/src/utils.ts
index efbc5e8e75..e6c0c384bf 100644
--- a/packages/components/roving-focus-group/src/utils.ts
+++ b/packages/components/roving-focus-group/src/utils.ts
@@ -34,7 +34,7 @@ export const getFocusIntent = (
   orientation?: Orientation,
   dir?: Direction
 ) => {
-  const key = getDirectionAwareKey(event.key, dir)
+  const key = getDirectionAwareKey(event.code, dir)
   if (
     orientation === 'vertical' &&
     [EVENT_CODE.left, EVENT_CODE.right].includes(key)
diff --git a/packages/components/select-v2/src/select-dropdown.tsx b/packages/components/select-v2/src/select-dropdown.tsx
index f1194b2070..9008e95b2b 100644
--- a/packages/components/select-v2/src/select-dropdown.tsx
+++ b/packages/components/select-v2/src/select-dropdown.tsx
@@ -226,7 +226,7 @@ export default defineComponent({
 
     const onKeydown = (e: KeyboardEvent) => {
       const { code } = e
-      const { tab, esc, down, up, enter } = EVENT_CODE
+      const { tab, esc, down, up, enter, numpadEnter } = EVENT_CODE
       if (code !== tab) {
         e.preventDefault()
         e.stopPropagation()
@@ -234,22 +234,19 @@ export default defineComponent({
 
       switch (code) {
         case tab:
-        case esc: {
+        case esc:
           onEscOrTab()
           break
-        }
-        case down: {
+        case down:
           onForward()
           break
-        }
-        case up: {
+        case up:
           onBackward()
           break
-        }
-        case enter: {
+        case enter:
+        case numpadEnter:
           onKeyboardSelect()
           break
-        }
       }
     }
 
diff --git a/packages/components/slider/__tests__/slider.test.tsx b/packages/components/slider/__tests__/slider.test.tsx
index fb8acbb18c..1a6d05dbe4 100644
--- a/packages/components/slider/__tests__/slider.test.tsx
+++ b/packages/components/slider/__tests__/slider.test.tsx
@@ -197,13 +197,13 @@ describe('Slider', () => {
       const slider = wrapper.findComponent({ name: 'ElSliderButton' })
 
       slider.vm.onKeyDown(
-        new KeyboardEvent('keydown', { key: EVENT_CODE.right })
+        new KeyboardEvent('keydown', { code: EVENT_CODE.right })
       )
       await nextTick()
       expect(value.value).toBe(1)
 
       slider.vm.onKeyDown(
-        new KeyboardEvent('keydown', { key: EVENT_CODE.left })
+        new KeyboardEvent('keydown', { code: EVENT_CODE.left })
       )
       await nextTick()
       expect(value.value).toBe(0)
@@ -215,12 +215,12 @@ describe('Slider', () => {
 
       const slider = wrapper.findComponent({ name: 'ElSliderButton' })
 
-      slider.vm.onKeyDown(new KeyboardEvent('keydown', { key: EVENT_CODE.up }))
+      slider.vm.onKeyDown(new KeyboardEvent('keydown', { code: EVENT_CODE.up }))
       await nextTick()
       expect(value.value).toBe(1)
 
       slider.vm.onKeyDown(
-        new KeyboardEvent('keydown', { key: EVENT_CODE.down })
+        new KeyboardEvent('keydown', { code: EVENT_CODE.down })
       )
       await nextTick()
       expect(value.value).toBe(0)
@@ -234,13 +234,13 @@ describe('Slider', () => {
 
       const slider = wrapper.findComponent({ name: 'ElSliderButton' })
       slider.vm.onKeyDown(
-        new KeyboardEvent('keydown', { key: EVENT_CODE.pageUp })
+        new KeyboardEvent('keydown', { code: EVENT_CODE.pageUp })
       )
       await nextTick()
       expect(value.value).toBe(3)
 
       slider.vm.onKeyDown(
-        new KeyboardEvent('keydown', { key: EVENT_CODE.pageDown })
+        new KeyboardEvent('keydown', { code: EVENT_CODE.pageDown })
       )
       await nextTick()
       expect(value.value).toBe(-1)
@@ -254,12 +254,14 @@ describe('Slider', () => {
 
       const slider = wrapper.findComponent({ name: 'ElSliderButton' })
       slider.vm.onKeyDown(
-        new KeyboardEvent('keydown', { key: EVENT_CODE.home })
+        new KeyboardEvent('keydown', { code: EVENT_CODE.home })
       )
       await nextTick()
       expect(value.value).toBe(-5)
 
-      slider.vm.onKeyDown(new KeyboardEvent('keydown', { key: EVENT_CODE.end }))
+      slider.vm.onKeyDown(
+        new KeyboardEvent('keydown', { code: EVENT_CODE.end })
+      )
       await nextTick()
       expect(value.value).toBe(10)
     })
diff --git a/packages/components/slider/src/composables/use-slider-button.ts b/packages/components/slider/src/composables/use-slider-button.ts
index 0519bad852..cb3dcb5a83 100644
--- a/packages/components/slider/src/composables/use-slider-button.ts
+++ b/packages/components/slider/src/composables/use-slider-button.ts
@@ -13,8 +13,6 @@ import type {
 } from '../button'
 import type { TooltipInstance } from '@element-plus/components/tooltip'
 
-const { left, down, right, up, home, end, pageUp, pageDown } = EVENT_CODE
-
 const useTooltip = (
   props: SliderButtonProps,
   formatTooltip: Ref<SliderProps['formatTooltip']>,
@@ -151,21 +149,33 @@ export const useSliderButton = (
 
   const onKeyDown = (event: KeyboardEvent) => {
     let isPreventDefault = true
-    if ([left, down].includes(event.key)) {
-      onLeftKeyDown()
-    } else if ([right, up].includes(event.key)) {
-      onRightKeyDown()
-    } else if (event.key === home) {
-      onHomeKeyDown()
-    } else if (event.key === end) {
-      onEndKeyDown()
-    } else if (event.key === pageDown) {
-      onPageDownKeyDown()
-    } else if (event.key === pageUp) {
-      onPageUpKeyDown()
-    } else {
-      isPreventDefault = false
+
+    switch (event.code) {
+      case EVENT_CODE.left:
+      case EVENT_CODE.down:
+        onLeftKeyDown()
+        break
+      case EVENT_CODE.right:
+      case EVENT_CODE.up:
+        onRightKeyDown()
+        break
+      case EVENT_CODE.home:
+        onHomeKeyDown()
+        break
+      case EVENT_CODE.end:
+        onEndKeyDown()
+        break
+      case EVENT_CODE.pageDown:
+        onPageDownKeyDown()
+        break
+      case EVENT_CODE.pageUp:
+        onPageUpKeyDown()
+        break
+      default:
+        isPreventDefault = false
+        break
     }
+
     isPreventDefault && event.preventDefault()
   }
 
diff --git a/packages/components/tabs/src/tab-nav.tsx b/packages/components/tabs/src/tab-nav.tsx
index 29991c5079..1a02606a1a 100644
--- a/packages/components/tabs/src/tab-nav.tsx
+++ b/packages/components/tabs/src/tab-nav.tsx
@@ -202,38 +202,36 @@ const TabNav = defineComponent({
       }
     }
 
-    const changeTab = (e: KeyboardEvent) => {
-      const code = e.code
+    const changeTab = (event: KeyboardEvent) => {
+      let step = 0
 
-      const { up, down, left, right } = EVENT_CODE
-      if (![up, down, left, right].includes(code)) return
-
-      // 左右上下键更换tab
-      const tabList = Array.from(
-        (e.currentTarget as HTMLDivElement).querySelectorAll<HTMLDivElement>(
-          '[role=tab]:not(.is-disabled)'
-        )
-      )
-      const currentIndex = tabList.indexOf(e.target as HTMLDivElement)
-
-      let nextIndex: number
-      if (code === left || code === up) {
-        // left
-        if (currentIndex === 0) {
-          // first
-          nextIndex = tabList.length - 1
-        } else {
-          nextIndex = currentIndex - 1
-        }
-      } else {
-        // right
-        if (currentIndex < tabList.length - 1) {
-          // not last
-          nextIndex = currentIndex + 1
-        } else {
-          nextIndex = 0
-        }
+      switch (event.code) {
+        case EVENT_CODE.left:
+        case EVENT_CODE.up:
+          step = -1
+          break
+        case EVENT_CODE.right:
+        case EVENT_CODE.down:
+          step = 1
+          break
+        default:
+          return
       }
+
+      const tabList = Array.from(
+        (
+          event.currentTarget as HTMLDivElement
+        ).querySelectorAll<HTMLDivElement>('[role=tab]:not(.is-disabled)')
+      )
+      const currentIndex = tabList.indexOf(event.target as HTMLDivElement)
+      let nextIndex = currentIndex + step
+
+      if (nextIndex < 0) {
+        nextIndex = tabList.length - 1
+      } else if (nextIndex >= tabList.length) {
+        nextIndex = 0
+      }
+
       tabList[nextIndex].focus({ preventScroll: true }) // 改变焦点元素
       tabList[nextIndex].click() // 选中下一个tab
       setFocus()
diff --git a/packages/components/tabs/src/tabs.tsx b/packages/components/tabs/src/tabs.tsx
index 5792670011..04baf8b816 100644
--- a/packages/components/tabs/src/tabs.tsx
+++ b/packages/components/tabs/src/tabs.tsx
@@ -199,7 +199,8 @@ const Tabs = defineComponent({
             tabindex="0"
             onClick={handleTabAdd}
             onKeydown={(ev: KeyboardEvent) => {
-              if (ev.code === EVENT_CODE.enter) handleTabAdd()
+              if ([EVENT_CODE.enter, EVENT_CODE.numpadEnter].includes(ev.code))
+                handleTabAdd()
             }}
           >
             {addSlot ? (
diff --git a/packages/components/tooltip/src/trigger.ts b/packages/components/tooltip/src/trigger.ts
index e33bcccf05..130f2dcf8d 100644
--- a/packages/components/tooltip/src/trigger.ts
+++ b/packages/components/tooltip/src/trigger.ts
@@ -24,7 +24,7 @@ export const useTooltipTriggerProps = buildProps({
    */
   triggerKeys: {
     type: definePropType<string[]>(Array),
-    default: () => [EVENT_CODE.enter, EVENT_CODE.space],
+    default: () => [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space],
   },
 } as const)
 
diff --git a/packages/components/tree/src/model/useKeydown.ts b/packages/components/tree/src/model/useKeydown.ts
index 33d35fb44f..3293fd4bff 100644
--- a/packages/components/tree/src/model/useKeydown.ts
+++ b/packages/components/tree/src/model/useKeydown.ts
@@ -99,7 +99,12 @@ export function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>) {
     const hasInput = currentItem.querySelector(
       '[type="checkbox"]'
     ) as Nullable<HTMLInputElement>
-    if ([EVENT_CODE.enter, EVENT_CODE.space].includes(code) && hasInput) {
+    if (
+      [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space].includes(
+        code
+      ) &&
+      hasInput
+    ) {
       ev.preventDefault()
       hasInput.click()
     }
diff --git a/packages/hooks/use-escape-keydown/index.ts b/packages/hooks/use-escape-keydown/index.ts
index a7c4e8ba1e..6374c3479b 100644
--- a/packages/hooks/use-escape-keydown/index.ts
+++ b/packages/hooks/use-escape-keydown/index.ts
@@ -4,9 +4,8 @@ import { EVENT_CODE } from '@element-plus/constants'
 
 let registeredEscapeHandlers: ((e: KeyboardEvent) => void)[] = []
 
-const cachedHandler = (e: Event) => {
-  const event = e as KeyboardEvent
-  if (event.key === EVENT_CODE.esc) {
+const cachedHandler = (event: KeyboardEvent) => {
+  if (event.code === EVENT_CODE.esc) {
     registeredEscapeHandlers.forEach((registeredHandler) =>
       registeredHandler(event)
     )