按钮需要点击两次才能跳转到欧芹错误

如何解决按钮需要点击两次才能跳转到欧芹错误

我有一份欧芹表格。每个选项卡都是欧芹组，当我单击下一步按钮时，如果选项卡/组中的任何字段无效，欧芹应该将焦点设置在第一个错误字段上。场景是：

1. 将所有字段留空
2. 点击按钮
3. 欧芹应该将重点放在第一个必需但空的字段上
4. 填写字段
5. 点击按钮
6. 欧芹应该将焦点放在下一个必需但空的字段上
7. 填写字段
8. 点击按钮
9. 欧芹应该将焦点放在下一个必需但空的字段上 等

结果是前 2-3 次迭代工作正常，点击后几个 Next 按钮保持聚焦，我需要第二次单击它以将焦点转移到正确的字段。我找不到关于哪个字段导致行为的任何模式，我删除了所有验证器，但“需要”以确保它与自定义验证器无关。您可以在下面找到我的 js 代码。我怀疑这种情况与某些线程竞争有关，但我找不到我的代码中可能发生的位置。你能帮忙吗？

constructor(){
    {...}
    let nextSelector = this.jq("#nextBtn");
    nextSelector.on("click",this.next);
    {...}
}

next() {
    this.navigate(this.currentTab + 1);
}


navigate(n) {
    this.parsley.whenValidate({
        group: "block-" + this.currentTab
    }).done(() => {
        this.tabValidationState[this.currentTab].state = "valid";
        this.currentTab = parseInt(n);
        this.prevIoUsTab = this.currentTab-1;
        this.showTab(this.currentTab);
    }).fail(() => {
        this.tabValidationState[this.currentTab].state = "invalid";     
    });
}