Lift frozen columns up to allow some z-index changes beneath them. (#11117)

Fixes #9787

themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss

@@ -214,6 +214,8 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
     &.frozen {
       @include box-shadow(1px 0 2px rgba(0,0,0,.1));
       border-right: $v-grid-cell-vertical-border;
+      position:relative;
+      z-index: 11;
 
       @if $v-grid-cell-vertical-border and $v-grid-cell-vertical-border != none {
         + th,

uitest/src/main/java/com/vaadin/tests/components/grid/DateFieldHeaderScrollWithFrozen.java

@@ -0,0 +1,105 @@
+package com.vaadin.tests.components.grid;
+
+import java.time.LocalDate;
+
+import com.vaadin.data.Binder.Binding;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.DateField;
+import com.vaadin.ui.Grid;
+import com.vaadin.ui.Grid.Column;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.components.grid.HeaderRow;
+import com.vaadin.ui.renderers.ComponentRenderer;
+import com.vaadin.ui.themes.ValoTheme;
+
+public class DateFieldHeaderScrollWithFrozen extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        Grid<Pojo> grid = new Grid<>();
+
+        Column<Pojo, String> col0 = grid.addColumn(s -> {
+            return "col0";
+        }).setWidth(100).setCaption("col0").setResizable(true)
+                .setEditorComponent(new TextField("h0"), Pojo::setCol0);
+
+        Column<Pojo, String> col1 = grid.addColumn(s -> {
+            return "col1";
+        }).setWidth(100).setCaption("col1")
+                .setEditorComponent(new TextField("h1"), Pojo::setCol1);
+
+        Column<Pojo, CssLayout> col2 = grid.addColumn(s -> {
+            CssLayout group = new CssLayout(new DateField());
+            group.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
+            return group;
+        }).setWidth(200).setCaption("col2")
+                .setRenderer(new ComponentRenderer());
+
+        Column<Pojo, String> col3 = grid.addColumn(s -> {
+            return "col3";
+        }).setWidth(999).setCaption("col3")
+                .setEditorComponent(new TextField("h3"), Pojo::setCol3);
+
+        Binding<Pojo, LocalDate> dateFieldBinding = grid.getEditor().getBinder()
+                .forField(new DateField()).bind(Pojo::getCol2, Pojo::setCol2);
+        col2.setEditorBinding(dateFieldBinding);
+
+        HeaderRow headerRow = grid.addHeaderRowAt(1);
+        headerRow.getCell(col0).setComponent(new Label("h0"));
+        headerRow.getCell(col1).setComponent(new Label("h1"));
+        headerRow.getCell(col2).setComponent(new DateField());
+        headerRow.getCell(col3).setComponent(new Label("h3"));
+
+        grid.setItems(new Pojo(), new Pojo(), new Pojo());
+
+        grid.setFrozenColumnCount(2);
+
+        grid.getEditor().setEnabled(true);
+        grid.addItemClickListener(e -> {
+            grid.getEditor().editRow(e.getRowIndex());
+        });
+
+        getLayout().addComponents(grid);
+    }
+
+    class Pojo {
+        String col0, col1, col3;
+        LocalDate col2;
+
+        public String getCol0() {
+            return col0;
+        }
+
+        public void setCol0(String col0) {
+            this.col0 = col0;
+        }
+
+        public String getCol1() {
+            return col1;
+        }
+
+        public void setCol1(String col1) {
+            this.col1 = col1;
+        }
+
+        public LocalDate getCol2() {
+            return col2;
+        }
+
+        public void setCol2(LocalDate col2) {
+            this.col2 = col2;
+        }
+
+        public String getCol3() {
+            return col3;
+        }
+
+        public void setCol3(String col3) {
+            this.col3 = col3;
+        }
+    }
+
+}

uitest/src/test/java/com/vaadin/tests/components/grid/DateFieldHeaderScrollWithFrozenTest.java

@@ -0,0 +1,42 @@
+package com.vaadin.tests.components.grid;
+
+import static org.junit.Assert.assertTrue;
+
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.GridElement;
+import com.vaadin.testbench.elements.GridElement.GridCellElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class DateFieldHeaderScrollWithFrozenTest extends MultiBrowserTest {
+
+    @Test
+    public void iconNotVisibleWhenScrolled() throws InterruptedException {
+        openTestURL();
+
+        waitForElementPresent(By.className("v-datefield-button"));
+
+        GridElement gridElement = $(GridElement.class).first();
+        WebElement buttonElement = findElement(
+                By.className("v-datefield-button"));
+        GridCellElement frozenElement = gridElement.getHeaderCell(1, 1);
+
+        gridElement.getHorizontalScroller().scrollLeft(60);
+
+        int buttonRight = buttonElement.getLocation().getX()
+                + buttonElement.getRect().getWidth();
+        int frozenRight = frozenElement.getLocation().getX()
+                + frozenElement.getRect().getWidth();
+        assertTrue(buttonRight + " is not smaller than " + frozenRight
+                + ", not enough scrolling", buttonRight < frozenRight);
+
+        Integer buttonZ = Integer.valueOf(buttonElement.getCssValue("z-index"));
+        Integer frozenZ = Integer.valueOf(frozenElement.getCssValue("z-index"));
+        assertTrue(
+                buttonZ + " is not smaller than " + frozenZ
+                        + ", button not hidden beneath frozen column",
+                buttonZ < frozenZ);
+    }
+}