解决弹窗中form表单中按下tab键不切换的问题

开发过程中碰到el-dialog中使用的form组件，按下键盘tab键不会切换到下一个，普通页面就正常切换。

解决办法

<ElInput
    ref="newPWDInput"
    v-model="newPWD"
    :clearable="true"
    :maxlength="16"
    :tabindex="2"
    :type="passwordVisible ? 'text' : 'password'"
    oncopy="return false"
    oncut="return false"
    placeholder="设置新密码"
    @keydown.tab="handleTab($event, 'repeatPWDInput')"
  >
    <!-- 省略其他代码 -->
  </ElInput>
</ElFormItem>
<ElFormItem
  :prop="'repeatPWD'"
  :rules="[
    {
      validator: validateRepeatPWD,
      trigger: ['blur'],
    },
  ]"
>
  <ElInput
    ref="repeatPWDInput"
    v-model="repeatPWD"
    :clearable="true"
    :maxlength="16"
    :tabindex="3"
    oncopy="return false"
    oncut="return false"
    :type="rePasswordVisible ? 'text' : 'password'"
    placeholder="请再次输入密码"
    @keyup.enter="onConfirm"
    @keydown.tab="handleTab($event, 'newPWDInput')"
  >
    <!-- 省略其他代码 -->
  </ElInput>
<script setup lang="ts">
import { ref } from 'vue';
// 省略其他导入代码

const newPWDInput = ref(null);
const repeatPWDInput = ref(null);

const handleTab = (event, nextInputRef) => {
  event.preventDefault(); // 阻止默认的 Tab 键行为
  if (nextInputRef === 'newPWDInput') {
    newPWDInput.value.focus();
  } else if (nextInputRef === 'repeatPWDInput') {
    repeatPWDInput.value.focus();
  }
};

// 省略其他代码
</script>

这样只适合input框少的时候解决办法，多的情况下就得考虑别的方案了。
大家有没有好的办法呢？