Search code examples
vaadinvaadin-flowvaadin23vaadin-date-picker

Vaadin 23 select DatePicker content at onfocus in dialog


DatePicker behavior in view: In a Vaadin 23 application there is a view with two DatePickers and a button:

Vaadin view with 2 DatePicker and button

When a user steps between the fields with TAB, then the DatePicker marks the whole content as selected (which is fine and the intended behavior):

TAB selects the whole content of DatePicker

DatePicker behavior in Dialog is different: When I put two DatePicker instances into a Dialog then the TAB behavior is different: it does not mark the whole content, but sets the focus after the content:

Vaadin dialog with 2 DatePicker

Code:

@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;
}
}

Intended behavior: I'd like the DatePicker to show the same behavior in a Dialog as it is in a view.

Question: How can I do this?

What I tried: When a focus listener calls select() at the INPUT child node in JavaScript (see code below), the whole content is marked/selected (which is as intended). But this also marks/selects the whole content when the user clicks with the mouse into the field (which is not intended).

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();}}");
    }
});

Update for TextField: When using TextFields instead of DatePickers, it's the same behavior: in a view a TAB marks/selects the whole content. In a Dialog a TAB sets the focus before the content, but does not mark/select it:

Vaadin Dialog with two TextField s


Solution

  • This behavior is fixed in Vaadin 23.1.6.