Vaadin Flow 23：必填字段填完按Tab后，启用的Add按钮未获焦点问题

问题原因 #

浏览器的Tab导航焦点顺序是基于页面初始化时元素的可交互状态生成的。你的"Add"按钮初始处于禁用状态，会被浏览器排除在Tab焦点序列之外；即便后续通过StatusChangeListener启用按钮，浏览器也不会自动重新生成焦点序列，所以按Tab时会直接跳到下一个可交互的"Cancel"按钮。

解决方案 #

在验证通过启用"Add"按钮的同时，主动将焦点设置到该按钮上，覆盖浏览器默认的Tab导航行为。Vaadin的Button类实现了Focusable接口，可直接调用focus()方法实现这一点。

代码示例 #

修改你的StatusChangeListener逻辑：

// 假设你的按钮实例为addButton
binder.addStatusChangeListener(event -> {
    boolean formValid = binder.isValid();
    addButton.setEnabled(formValid);
    // 表单验证通过且按钮启用时，主动设置焦点
    if (formValid) {
        addButton.focus();
    }
});

进阶优化（贴合原生Tab体验） #

如果需要保证按钮始终在Tab焦点序列中（比如支持连续按Tab的场景），可以初始化时设置tabindex属性，结合启用状态控制：

// 初始化时配置tabindex，确保按钮在焦点序列中
addButton.setTabIndex(0);
addButton.setEnabled(false);

// 监听器中保留原有逻辑，启用时设置焦点
binder.addStatusChangeListener(event -> {
    boolean formValid = binder.isValid();
    addButton.setEnabled(formValid);
    if (formValid) {
        addButton.focus();
    }
});

这样既保证了按钮在焦点序列中的位置，又通过主动设置焦点实现了预期的Tab导航行为。

内容的提问来源于stack exchange，提问作者Herman Bovens