DatePicker behavior in view: In a Vaadin 23 application there is a view with two DatePickers and a 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):
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:
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:
