From 83d1e2191e69b402ae4d24a7f30dcadf62b8a999 Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Sat, 16 Jul 2022 09:12:21 +0800
Subject: [PATCH] refactor(directives): [trap-focus] refactor (#8818)

---
 .../directives/__tests__/trap-focus.test.ts     |  6 +++---
 packages/directives/trap-focus/index.ts         | 17 ++++++++---------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/directives/__tests__/trap-focus.test.ts b/packages/directives/__tests__/trap-focus.test.ts
index db3d221519..4b60425b62 100644
--- a/packages/directives/__tests__/trap-focus.test.ts
+++ b/packages/directives/__tests__/trap-focus.test.ts
@@ -5,7 +5,7 @@ import { afterAll, afterEach, describe, expect, test, vi } from 'vitest'
 import * as Aria from '@element-plus/utils/dom/aria'
 
 import TrapFocus, { FOCUSABLE_CHILDREN } from '../trap-focus'
-import type { ITrapFocusElement } from '../trap-focus'
+import type { TrapFocusElement } from '../trap-focus'
 
 const isVisibleMock = vi.spyOn(Aria, 'isVisible').mockImplementation(() => true)
 
@@ -40,7 +40,7 @@ describe('v-trap-focus', () => {
         </div>
       `)
     expect(
-      (wrapper.element as ITrapFocusElement)[FOCUSABLE_CHILDREN].length
+      (wrapper.element as TrapFocusElement)[FOCUSABLE_CHILDREN].length
     ).toBe(1)
   })
 
@@ -63,7 +63,7 @@ describe('v-trap-focus', () => {
       </div>
     `)
     expect(
-      (wrapper.element as ITrapFocusElement)[FOCUSABLE_CHILDREN].length
+      (wrapper.element as TrapFocusElement)[FOCUSABLE_CHILDREN].length
     ).toBe(5)
   })
 
diff --git a/packages/directives/trap-focus/index.ts b/packages/directives/trap-focus/index.ts
index 3faf623240..5339b50c4f 100644
--- a/packages/directives/trap-focus/index.ts
+++ b/packages/directives/trap-focus/index.ts
@@ -1,18 +1,17 @@
-// @ts-nocheck
 import { nextTick } from 'vue'
-import { obtainAllFocusableElements, off, on } from '@element-plus/utils'
+import { obtainAllFocusableElements } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import type { ObjectDirective } from 'vue'
 
 export const FOCUSABLE_CHILDREN = '_trap-focus-children'
 export const TRAP_FOCUS_HANDLER = '_trap-focus-handler'
 
-export interface ITrapFocusElement extends HTMLElement {
+export interface TrapFocusElement extends HTMLElement {
   [FOCUSABLE_CHILDREN]: HTMLElement[]
   [TRAP_FOCUS_HANDLER]: (e: KeyboardEvent) => void
 }
 
-const FOCUS_STACK = []
+const FOCUS_STACK: TrapFocusElement[] = []
 
 const FOCUS_HANDLER = (e: KeyboardEvent) => {
   // Getting the top layer.
@@ -42,7 +41,7 @@ const FOCUS_HANDLER = (e: KeyboardEvent) => {
     // the is critical since jsdom did not implement user actions, you can only mock it
     // DELETE ME: when testing env switches to puppeteer
     if (process.env.NODE_ENV === 'test') {
-      const index = focusableElement.indexOf(e.target)
+      const index = focusableElement.indexOf(e.target as HTMLElement)
       if (index !== -1) {
         focusableElement[goingBackward ? index - 1 : index + 1]?.focus()
       }
@@ -51,14 +50,14 @@ const FOCUS_HANDLER = (e: KeyboardEvent) => {
 }
 
 const TrapFocus: ObjectDirective = {
-  beforeMount(el: ITrapFocusElement) {
+  beforeMount(el: TrapFocusElement) {
     el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements(el)
     FOCUS_STACK.push(el)
     if (FOCUS_STACK.length <= 1) {
-      on(document, 'keydown', FOCUS_HANDLER)
+      document.addEventListener('keydown', FOCUS_HANDLER)
     }
   },
-  updated(el: ITrapFocusElement) {
+  updated(el: TrapFocusElement) {
     nextTick(() => {
       el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements(el)
     })
@@ -66,7 +65,7 @@ const TrapFocus: ObjectDirective = {
   unmounted() {
     FOCUS_STACK.shift()
     if (FOCUS_STACK.length === 0) {
-      off(document, 'keydown', FOCUS_HANDLER)
+      document.removeEventListener('keydown', FOCUS_HANDLER)
     }
   },
 }