fix(components): numpadEnter does not work like the Enter (#18855)

2024-11-21 01:02:59 +08:00 · 2024-11-14 21:14:51 +08:00 · 2024-11-14 21:14:51 +08:00 · 343cacf5cc
commit 343cacf5cc
parent 6a3dccaad8
25 changed files with 194 additions and 153 deletions
--- 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()
  }
--- 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()
--- 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
      }
--- 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
  }
--- 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()
--- 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)
--- 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),
--- 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()
--- 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)
    })
--- 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) {
--- 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()
+          })
+        }
      }
-    }
  }
 }

--- 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()
--- 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()
--- 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)
--- 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'
--- 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
        }
--- 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)
--- 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
-        }
      }
    }

--- 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)
    })
--- 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()
  }

--- 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()
--- 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 ? (
--- 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)

--- 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()
    }
--- 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)
    )