RadioButtonGroup的ComponentRenderer中输入框无法获取焦点问题

开发功能时遇到如下问题：

• 选择左侧面板的Monthly选项后，右侧面板会渲染对应的组件
• 但右侧面板中渲染出的IntegerField输入框和ComboBox下拉框无法获取焦点，点击时没有响应

相关代码片段：

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

原因分析 #

使用ComponentRenderer为RadioButtonGroup的选项渲染自定义组件时，整个渲染区域会绑定到对应的RadioButton上。点击输入框/下拉框时，点击事件会被RadioButton拦截，导致内部输入组件无法获取焦点。

修复方案 #

放弃使用ComponentRenderer，改为将RadioButton和输入组件分离布局，确保输入组件不在RadioButton的点击区域内。具体实现如下：

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 -> {
    rightLayout.removeAll(); // 清空右侧面板，避免重复添加组件
    if (event.getValue().equalsIgnoreCase("Monthly")) {
        VerticalLayout monthlyLayout = new VerticalLayout();
        monthlyLayout.setSpacing(true);
        
        // 第一个选项：Day
        HorizontalLayout dayOptionLayout = new HorizontalLayout();
        dayOptionLayout.setAlignItems(Alignment.CENTER);
        RadioButton dayRadio = new RadioButton();
        dayRadio.setGroupName("monthly-group");
        
        IntegerField dayField = new IntegerField();
        dayField.setValue(1);
        dayField.setWidth("50px");
        
        IntegerField monthField = new IntegerField();
        monthField.setValue(1);
        monthField.setWidth("50px");
        
        dayOptionLayout.add(dayRadio, new Label("Day"), dayField, new Label("of every"), monthField, new Label("month(s)"));
        
        // 第二个选项：The
        HorizontalLayout theOptionLayout = new HorizontalLayout();
        theOptionLayout.setAlignItems(Alignment.CENTER);
        RadioButton theRadio = new RadioButton();
        theRadio.setGroupName("monthly-group");
        
        ComboBox<String> weekNum = new ComboBox<>();
        weekNum.setItems("First", "Second", "Third", "Fourth", "Last");
        weekNum.setValue("First");
        weekNum.setWidth("100px");
        
        ComboBox<String> day = new ComboBox<>();
        day.setItems("Day", "Weekday", "Weekend Day", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
        day.setValue("Friday");
        day.setWidth("120px");
        
        IntegerField theMonthField = new IntegerField();
        theMonthField.setValue(1);
        theMonthField.setWidth("50px");
        
        theOptionLayout.add(theRadio, new Label("The"), weekNum, day, new Label("of every"), theMonthField, new Label("month(s)"));
        
        // 设置默认选中第一个选项
        dayRadio.setValue(true);
        
        monthlyLayout.add(dayOptionLayout, theOptionLayout);
        rightLayout.add(monthlyLayout);
    }
});

关键改进点 #

• 用独立的RadioButton替代RadioButtonGroup的自动选项生成，手动设置相同的groupName保证单选逻辑
• 将输入组件与RadioButton放在同一布局中，但不属于RadioButton的渲染内容，避免事件拦截
• 添加rightLayout.removeAll()避免多次选择Monthly时重复添加组件

内容的提问来源于stack exchange，提问作者Liyakath S