javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [tree] retain DOM nodes only in their intended scope (#20494)

Browse Source 
fix(components): [tree] retain the reference to DOM nodes only in its intended scope
This commit is contained in:
dopamine
2025-04-22 11:23:34 +08:00
committed by GitHub
parent a5b60869bc
commit d8e49e5837
1 changed files with 18 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/components/tree/src/model/useKeydown.ts
View File

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