Hi I am trying develop a feature something as below in the picture. When I am selecting option(Ex: Monthly) from left panel right side panel will automatically render the required components. When I select the option from the right side panel I want to type the required values in input box. When I click on input box I am not getting the focus to type. Facing same issue for Combobox as well. Attaching some code snippet as well.
radioGroup = new RadioButtonGroup<>();
radioGroup.addThemeVariants(RadioGroupVariant.LUMO_VERTICAL);
radioGroup.setItems("None", "Daily", "Weekly", "Monthly");
radioGroup.setValue("None");
VerticalLayout leftLayout = new VerticalLayout();
VerticalLayout rightLayout = new VerticalLayout();
radioGroup.addValueChangeListener(event -> {
if (event.getValue().equalsIgnoreCase("Monthly")) {
monthlyRadioGroup = new RadioButtonGroup<>();
monthlyRadioGroup.addThemeVariants(RadioGroupVariant.LUMO_VERTICAL);
monthlyRadioGroup.setItems("Day", "The");
monthlyRadioGroup.setValue("Day");
monthlyRadioGroup.setRenderer(new ComponentRenderer<>(item -> {
if ("Day".equals(item)) {
HorizontalLayout dayLayout = new HorizontalLayout();
IntegerField dayField = new IntegerField();
dayField.setValue(1);
dayField.focus();
dayField.setAutofocus(true);
dayField.setWidth("50px");
IntegerField monthField = new IntegerField();
monthField.setValue(1);
monthField.setWidth("50px");
dayLayout.add(new Label("Day"), dayField, new Label("of every"), monthField, new Label("month(s)"));
dayLayout.setAlignItems(Alignment.CENTER);
return dayLayout;
}else {
HorizontalLayout weekDayLayout = new HorizontalLayout();
ComboBox<String> weekNum = new ComboBox<String>();
weekNum.setItems("First", "Second", "Third", "Fourth", "Last");
weekNum.setValue("First");
weekNum.setWidth("100px");
ComboBox<String> day = new ComboBox<String>();
day.setItems("Day", "Weekday", "Weekend Day", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
day.setValue("Friday");
day.setWidth("120px");
IntegerField monthField = new IntegerField();
monthField.setValue(1);
monthField.setWidth("50px");
weekDayLayout.add(new Label("The"), weekNum, day, new Label("of every"), monthField,
new Label("month(s)"));
weekDayLayout.setAlignItems(Alignment.CENTER);
return weekDayLayout;
}
}));
rightLayout.add(monthlyRadioGroup);
}
});
It worked by adding below snippet in all the input fields
dayField.getElement().addEventListener("click", e -> dayField.focus());