Vue3 setup中 使用focus()方法自动获取焦点只能触发一次

Question

求大神解答。。。 搜不到解决方案

我做了个一个模拟文件夹目录的需求, 现在要实现重命名功能, 每次只有第一次点击元素时textarea元素能自动焦点, 第二次就无法获取焦点...

第二次点击就会变成如下, 没有焦点

// 页面HTML
<template>
        <textarea v-if="isEditFolder && item.id === currEditId" :id="item.id" :ref="setEditItemRef" @blur="setEditItemBlur" class="curr-input" cols="10" rows="3" v-model="currEditInputVal">
          </textarea>
</template>

// typescript部分
<script lang="ts" setup>
import {nextTick, reactive, ref, onMounted, watch} from "vue";
import {ElMessage} from "element-plus";

//++++ 重命名 目录 ++++
const isEditFolder = ref(false)
let currEditId = ref(0)
// 存储编辑时的dom
let itemEditRefs: any = ref([])
const setEditItemRef = (el: any) => {
  if (el && !itemEditRefs.value.some((item: any) => item.id.toString() === el.id.toString())) {
    itemEditRefs.value.push(el)
  }
}

const currEditInputVal = ref('')
function handleUpdate(obj: any) {
  console.log(obj)
  currEditInputVal.value = obj.name
  isEditFolder.value = true
  currEditId.value = obj.id
  nextTick(() => {
    //TODO:
    const currEditDom = itemEditRefs.value.filter((item: any) => item.id.toString() === obj.id.toString())[0]
    // currEditDom是dom元素
    currEditDom.focus() // 这个focus只能触发一次, 第二次就没法自动获取焦点了....
    currEditDom.select()
  })
}
</script>

Answer 1

textarea的 v-if改为v-show就好了. v-if会重新渲染元素, 而v-show不会
如果一个元素被从 DOM 中移除，那么也会导致焦点丢失。如果稍后它被重新插入到 DOM，焦点也不会回到它身上。参考这个特性.... 还是自己js基础不扎实啊!!!!