Vaadin23 Dialog内DatePicker/TextField Tab聚焦时无法全选内容问题

普通视图中DatePicker的默认行为 #

在Vaadin 23应用中，普通视图内放置两个DatePicker组件与一个按钮时：

用户通过TAB键在字段间切换时，DatePicker会自动全选输入框内的全部内容，该表现符合预期设计：

Dialog内组件的行为差异 #

将两个DatePicker实例放入Dialog组件内时，TAB切换行为出现异常：输入框不会全选已有内容，仅将光标定位在内容之后，未触发全选效果：

补充验证：将DatePicker替换为TextField后存在相同问题：普通视图内TAB切换聚焦时会全选内容，Dialog内TAB切换聚焦时仅将光标定位在内容前，不会触发全选：

@Route("sandbox")
public class SandboxView extends VerticalLayout {

    public SandboxView() {
        this.add(createDatePicker(), createDatePicker());
        this.add(new Button("Open dialog", event -> {
            openDialog();
        }));
    }

    private void openDialog() {
        VerticalLayout layout = new VerticalLayout(createDatePicker(), createDatePicker());
        Dialog dialog = new Dialog(layout);
        dialog.open();
    }

    private DatePicker createDatePicker() {
        DatePicker datePicker = new DatePicker();
        datePicker.setValue(LocalDate.now());
        datePicker.setAutoOpen(false);
        return datePicker;
    }
}

Dialog内的DatePicker在TAB切换聚焦时的全选表现，与普通视图中的行为保持一致，同时避免鼠标点击输入框时触发不必要的全选。

此前通过给字段元素添加focus事件监听器，事件触发时执行JavaScript查找内部INPUT子节点并调用select()方法，该方式可实现聚焦全选，但存在缺陷：用户鼠标点击输入框聚焦时也会触发全选，不符合交互预期。对应实现代码如下：

field.getElement().addEventListener("focus", new DomEventListener() {
    @Override
    public void handleEvent(DomEvent event) {
        event.getSource().executeJs("for (var i=0;i<$0.childNodes.length;i++){if($0.childNodes[i].nodeName=='INPUT'){$0.childNodes[i].select();}}");
    }
});

核心思路是区分键盘TAB聚焦和鼠标点击聚焦，仅在键盘TAB触发聚焦时执行全选逻辑：

• 监听组件的mousedown事件，记录本次聚焦是否由鼠标点击触发
• 触发focus事件时，若为鼠标点击来源则不执行额外逻辑，保持默认光标定位行为；若为键盘TAB触发的聚焦，则查找组件内部input节点执行全选操作
• 逻辑执行完成后重置来源标记，供下次聚焦判断

通用实现代码如下，DatePicker、TextField等输入类组件可直接复用：

private void addTabSelectLogic(Component inputField) {
    final boolean[] mouseTriggered = {false};
    // 监听鼠标按下事件，标记聚焦来源
    inputField.getElement().addEventListener("mousedown", e -> {
        mouseTriggered[0] = true;
    });
    // 聚焦时按来源判断是否执行全选
    inputField.getElement().addEventListener("focus", e -> {
        if (!mouseTriggered[0]) {
            e.getSource().executeJs("""
                const innerInput = $0.querySelector('input');
                if (innerInput) innerInput.select();
            """);
        }
        mouseTriggered[0] = false;
    });
}

组件初始化完成后调用addTabSelectLogic(组件实例)即可生效，可统一Dialog内组件与普通视图内组件的TAB聚焦行为，且不会影响鼠标点击时的正常交互。

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