Vaadin CheckBox Focus

Flow
1

Hi there,
I am not able to focus on a vaadin checkBox. This is possible on other components like check box group, radio button group, drop down…but not on check box. When selecting a checkbox the layout is the one that gets focused. I’m testing this(on my app and on vaadin sampler) using a chrome plugin that shows a square on the component that has the focus. What I want to achive is to focus programmatically on a component so that I can modify its value with keyboard and also to scroll automatically to that component
My app is build with vaadin 7

Thanks

2

I do not quite understand your question. Consider the following test app, the check box is getting the focus programmatically after check.focus() and space bar toggles the value of it as it should. Which part is not working in your app?

public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        
        final TextField name = new TextField();
        name.setCaption("Type your name here:");

        final Button button = new Button("Click Me");
        button.addClickListener( e -> {
            layout.addComponent(new Label("Thanks " + name.getValue() 
                    + ", it works!"));
        });
        
        CheckBox check = new CheckBox();
   		check.setValue(true);
        check.addValueChangeListener(e -> {
       		name.setEnabled(check.getValue());
       		button.setEnabled(check.getValue());       		
        });
        
        layout.addComponents(check, name, button);
        check.focus();
        layout.setMargin(true);
        layout.setSpacing(true);
        
        setContent(layout);
    }

}
3

When using TAB to navigate through components it jumps over the checkbox. And also using space after just clicking on the checkbox doesn’t toggle the value. Using Chrome Focus Indicator plugin I can see when a component is in focus. Using this plugin on Vaadin sampler, all components are surrounded by a color to indicate that are in focus. Check box it doesn’t but the layout does. Anyway on sampler I can get checkbox focused and use space to toggle value but on my app this is not working.