Overlapping components in GridLayout with Firefox

Hello!

Vaadin GridLayout components overlap eachother with Firefox when GridLayout is updated.

In my example I have a GridLayout(2, 3) that contains Buttons in column 0 and Labels/ListSelects in column 1. Clicking on a Button switches column 1 component from Label to ListSelect or ListSelect to Label.

When a Button is clicked and the component in column 1 changes from Label to ListSelect GridLayout is not expanded enough and ListSelect component overlaps the component below.

Expected behavior (Chrome):

Actual behavior (Firefox):

Tested with Vaadin versions 8.14.3 and 8.15.2
Browser: Latest version of Firefox (Windows & Linux)

Please see my test code below.

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        
        Button b1 = new Button("Button 1"); 
        Button b2 = new Button("Button 2"); 
        Button b3 = new Button("Button 3"); 
        
        Label l1 = new Label("Label 1");
        Label l2 = new Label("Label 2");
        Label l3 = new Label("Label 3");
        
        ListSelect<Integer> ls1 = this.getListSelect(0, 20);
        ListSelect<Integer> ls2 = this.getListSelect(30, 50);
        ListSelect<Integer> ls3 = this.getListSelect(40, 80);
        
        GridLayout gl = new GridLayout(2, 3);
        
        gl.addComponent(b1, 0, 0);
        gl.addComponent(b2, 0, 1);
        gl.addComponent(b3, 0, 2);
        gl.addComponent(l1, 1, 0);
        gl.addComponent(l2, 1, 1);
        gl.addComponent(l3, 1, 2);
        
        b1.addClickListener(click -> {
            
            if (gl.getComponent(1, 0).equals(l1)) {
                gl.replaceComponent(l1, ls1);
            }
            else {
                gl.replaceComponent(ls1, l1);
            }
            
        });
        
        b2.addClickListener(click -> {
            
            if (gl.getComponent(1, 1).equals(l2)) {
                gl.replaceComponent(l2, ls2);
            }
            else {
                gl.replaceComponent(ls2, l2);
            }
            
        });
        
        b3.addClickListener(click -> {
            
            if (gl.getComponent(1, 2).equals(l3)) {
                gl.replaceComponent(l3, ls3);
            }
            else {
                gl.replaceComponent(ls3, l3);
            }
            
        });
        
        VerticalLayout layout = new VerticalLayout();
        layout.addComponent(gl);
        
        setContent(layout);
        
    }
    
    private ListSelect<Integer> getListSelect(int min, int max) {
        
        List<Integer> values = new ArrayList<Integer>();
        for (int i = min; i <= max; i ++) {
            values.add(i);
        }
        
        ListSelect<Integer> listSelect = new ListSelect<Integer>();
        listSelect.setItemCaptionGenerator(i -> "Integer " + i);
        listSelect.setRows(5);
        listSelect.setItems(values);
        
        return listSelect;
        
    }

Start with the supplied GridLayout reproduction using replaceComponent to switch Label and ListSelect instances in Firefox, and compare its behavior with Chrome. Trace the GridLayout update and sizing path involved in component replacement; done means the layout expands correctly without the replacement ListSelect overlapping the component below.