单击事件Vuejs之后将焦点放在子组件的元素上

Question

我希望焦点在单击父组件中的“取消”按钮后转到我的子组件中的“编辑”按钮。由于它是默认行为，因此它可以在chrome中工作，但是firefox将焦点移到页面顶部。 这是我的代码：

<parent>
    <child ref="childCard"
           :cancel-function="cancelTimeReminderLimit">
    </child>
<parent

------

<child>
    <button ref="editButton"></button>
    <button @click="cancelFunction()"></button>
</child>

child.js：

props: {
    cancelFunction: Function,
},
methods:{
    focusEdit: function(){
      this.$refs.editbutton.focus()
    }
}

parent.js：

confirmRemoveReminder() {    
    this.$refs.editButton.focus();
    this.$nextTick(() => {
        this.$refs.editButton.focusEdit();
        this.$refs.editButton.focus();
        this.$refs.childCard.$refs.editButton.focus();
      }),

如您所见，我使用三种方法来实现这一目标：

1-将引用分配给子组件（ref="childCard"），然后直接调用按钮的引用（ref="editButton"）

2-将引用分配给子组件（ref="childCard"），然后通过方法（focusEdit()）调用button的引用

3-直接调用按钮的引用（ref="childCard"）

这两种方法都不起作用。有人知道为什么他们不工作吗？