From d8e49e583721f20e7023df2a1cc5a053bb540ee3 Mon Sep 17 00:00:00 2001
From: dopamine <coderzyou@gmail.com>
Date: Tue, 22 Apr 2025 11:23:34 +0800
Subject: [PATCH] fix(components): [tree] retain DOM nodes only in their
 intended scope (#20494)

fix(components): [tree] retain the reference to DOM nodes only in its intended scope
---
 .../components/tree/src/model/useKeydown.ts   | 44 ++++++++-----------
 1 file changed, 18 insertions(+), 26 deletions(-)

diff --git a/packages/components/tree/src/model/useKeydown.ts b/packages/components/tree/src/model/useKeydown.ts
index 3293fd4bff..f2a121a798 100644
--- a/packages/components/tree/src/model/useKeydown.ts
+++ b/packages/components/tree/src/model/useKeydown.ts
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { onMounted, onUpdated, shallowRef, watch } from 'vue'
+import { onMounted, onUpdated } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { EVENT_CODE } from '@element-plus/constants'
 import { useNamespace } from '@element-plus/hooks'
@@ -14,22 +14,15 @@ interface UseKeydownOption {
 export function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>) {
   const ns = useNamespace('tree')
 
-  const treeItems = shallowRef<Nullable<HTMLElement>[]>([])
-  const checkboxItems = shallowRef<Nullable<HTMLElement>[]>([])
-
   onMounted(() => {
     initTabIndex()
   })
 
   onUpdated(() => {
-    treeItems.value = Array.from(el$.value.querySelectorAll('[role=treeitem]'))
-    checkboxItems.value = Array.from(
+    const checkboxItems = Array.from(
       el$.value.querySelectorAll('input[type=checkbox]')
     )
-  })
-
-  watch(checkboxItems, (val) => {
-    val.forEach((checkbox) => {
+    checkboxItems.forEach((checkbox) => {
       checkbox.setAttribute('tabindex', '-1')
     })
   })
@@ -38,10 +31,10 @@ export function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>) {
     const currentItem = ev.target as HTMLElement
     if (!currentItem.className.includes(ns.b('node'))) return
     const code = ev.code
-    treeItems.value = Array.from(
+    const treeItems = Array.from(
       el$.value.querySelectorAll(`.${ns.is('focusable')}[role=treeitem]`)
     )
-    const currentIndex = treeItems.value.indexOf(currentItem)
+    const currentIndex = treeItems.indexOf(currentItem)
     let nextIndex
     if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {
       ev.preventDefault()
@@ -51,12 +44,10 @@ export function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>) {
             ? 0
             : currentIndex !== 0
             ? currentIndex - 1
-            : treeItems.value.length - 1
+            : treeItems.length - 1
         const startIndex = nextIndex
         while (true) {
-          if (
-            store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus
-          )
+          if (store.value.getNode(treeItems[nextIndex].dataset.key).canFocus)
             break
           nextIndex--
           if (nextIndex === startIndex) {
@@ -64,33 +55,31 @@ export function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>) {
             break
           }
           if (nextIndex < 0) {
-            nextIndex = treeItems.value.length - 1
+            nextIndex = treeItems.length - 1
           }
         }
       } else {
         nextIndex =
           currentIndex === -1
             ? 0
-            : currentIndex < treeItems.value.length - 1
+            : currentIndex < treeItems.length - 1
             ? currentIndex + 1
             : 0
         const startIndex = nextIndex
         while (true) {
-          if (
-            store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus
-          )
+          if (store.value.getNode(treeItems[nextIndex].dataset.key).canFocus)
             break
           nextIndex++
           if (nextIndex === startIndex) {
             nextIndex = -1
             break
           }
-          if (nextIndex >= treeItems.value.length) {
+          if (nextIndex >= treeItems.length) {
             nextIndex = 0
           }
         }
       }
-      nextIndex !== -1 && treeItems.value[nextIndex].focus()
+      nextIndex !== -1 && treeItems[nextIndex].focus()
     }
     if ([EVENT_CODE.left, EVENT_CODE.right].includes(code)) {
       ev.preventDefault()
@@ -113,12 +102,15 @@ export function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>) {
   useEventListener(el$, 'keydown', handleKeydown)
 
   const initTabIndex = (): void => {
-    treeItems.value = Array.from(
+    const treeItems = Array.from(
       el$.value.querySelectorAll(`.${ns.is('focusable')}[role=treeitem]`)
     )
-    checkboxItems.value = Array.from(
+    const checkboxItems = Array.from(
       el$.value.querySelectorAll('input[type=checkbox]')
     )
+    checkboxItems.forEach((checkbox) => {
+      checkbox.setAttribute('tabindex', '-1')
+    })
     const checkedItem = el$.value.querySelectorAll(
       `.${ns.is('checked')}[role=treeitem]`
     )
@@ -126,6 +118,6 @@ export function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>) {
       checkedItem[0].setAttribute('tabindex', '0')
       return
     }
-    treeItems.value[0]?.setAttribute('tabindex', '0')
+    treeItems[0]?.setAttribute('tabindex', '0')
   }
 }