Vaadin 23 выберите содержимое DatePicker в фокусе в диалоговом окне
Поведение DatePicker в представлении : в приложении Vaadin 23 есть представление с двумя DatePickers и кнопкой:
Когда пользователь переходит между полями с помощью TAB, весь контент помечается как выбранный (что нормально и ожидаемое поведение):
Поведение DatePicker в диалоговом окне отличается : когда я помещаю два экземпляра в a, поведение 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;
}
}
Предполагаемое поведение : я бы хотел, чтобы в представлении отображалось то же поведение, что и в представлении.
Вопрос : Как я могу это сделать?
Что я пробовал : Когда звонит слушатель фокусаselect()в дочернем узле INPUT в JavaScript (см. код ниже) весь контент помечается/выбирается (что, как и предполагалось). Но это также помечает/выбирает весь контент, когда пользователь щелкает мышью в поле (что не предназначено).
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();}}");
}
});
Обновление для TextField : при использованииTextFieldс вместоDatePickers, это то же самое поведение: в представлении TAB отмечает/выбирает весь контент. ВDialogTAB устанавливает фокус перед содержимым, но не отмечает/выбирает его:
