vaadinvaadin-flowvaadin14

Unable type values in input field RadioButtonGroup ComponentRenderer


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.

enter image description here

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

Solution

  • It worked by adding below snippet in all the input fields

    dayField.getElement().addEventListener("click", e -> dayField.focus());