如何阻止tab选中某个元素后直接进入这个元素

问题遇到的现象和发生背景

比如我的页面有一个button和一个view component 用来显示excel的两个元素
我可以在他们直接用tab切换
但是目前切换到excel的view时，就直接进去了，接着tab只会在excel里面的cell中继续移动

我希望当我用tab让这个显示excel的view获得焦点时，除非按下enter才进去（同时可以esc退出excel），否则继续在button之间切换

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

没看到楼主问题的相关图片或代码，仅根据问题描述，推测用的是vue框架，可能还用了excel的嵌入式插件。
我试着在vue3脚手架中模拟该问题，在默认情况下，button和view component之间使用tab键切换是可逆的，也就是说tab来回切换并没有出现“进入到元素当中”的情况，关键代码如下所示：
这是主页面的代码：

<template>
  <div id="nav">
    <input type="button" value="点我">
    <q1></q1>
  </div>
</template>
<script>
import q1 from '@/components/q1.vue'
export default {
  components:{q1},
}

这是名为q1的component的代码：

<template>
  <input type="text" name="" id="">
  <input type="text" name="" id="">
  <input type="text" name="" id="">
</template>

<script>
  export default {
    name: 'q1',
  }
</script>

其中q1是view component，来回切换是没问题的，所以初步推断：楼主遇到的情况在排除修改了默认设置的前提下，可能是插件的特性导致不能用tab切回去。不知道楼主具体用的哪种插件也就无从继续试。
思路：可以尝试对需要用tab键切换的元素进行键盘事件监听，添加tab键响应条件，必要的时候需阻止默认事件。逻辑细节我就不赘述了，如果需要更具体的答案，请附上问题的相关代码或者浏览器显示的页面截图，如果你的component使用了嵌入式插件，请说明用的是哪种插件。