Clicks through the focused cell :before pseudoelement (#15535)

Change-Id: I3741b8a44f7b02fe0dceaa4c7b59b1830c36a2be

2 files changed, 36 insertions, 0 deletions

diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index 310e37d0fb..f1889286b7 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -191,7 +191,19 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
       left: 0;
       border: $v-grid-cell-focused-border;
       display: none;
+      pointer-events: none;
     }
+    
+    // IE 8-10 apply "pointer-events" only to SVG elements. 
+    // Using an empty SVG instead of an empty text node makes IE
+    // obey the "pointer-events: none" and forwards click events 
+    // to the underlying element. The data decodes to:
+    // <svg xmlns="http://www.w3.org/2000/svg"></svg>
+    .ie8 &:before,
+    .ie9 &:before,
+    .ie10 &:before {
+      content: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==);
+    } 
   }
 
   .#{$primaryStyleName}:focus .#{$primaryStyleName}-cell-focused:before {
diff --git a/uitest/src/com/vaadin/tests/components/grid/WidgetRenderersTest.java b/uitest/src/com/vaadin/tests/components/grid/WidgetRenderersTest.java
index ba8e5135ab..01b957ccf5 100644
--- a/uitest/src/com/vaadin/tests/components/grid/WidgetRenderersTest.java
+++ b/uitest/src/com/vaadin/tests/components/grid/WidgetRenderersTest.java
@@ -17,10 +17,12 @@ package com.vaadin.tests.components.grid;
 
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertFalse;
+import static org.junit.Assert.assertNotEquals;
 import static org.junit.Assert.assertTrue;
 
 import org.junit.Test;
 import org.openqa.selenium.WebElement;
+import org.openqa.selenium.interactions.Actions;
 
 import com.vaadin.testbench.By;
 import com.vaadin.testbench.elements.ButtonElement;
@@ -60,6 +62,28 @@ public class WidgetRenderersTest extends MultiBrowserTest {
     }
 
     @Test
+    public void testButtonRendererAfterCellBeingFocused() {
+        openTestURL();
+
+        GridCellElement buttonCell = getGridCell(0, 1);
+        assertFalse("cell should not be focused before focusing",
+                buttonCell.isFocused());
+
+        // avoid clicking on the button
+        buttonCell.click(150, 5);
+        assertTrue("cell should be focused after focusing",
+                buttonCell.isFocused());
+
+        WebElement button = buttonCell.findElement(By.className("gwt-Button"));
+        assertNotEquals("Button should not be clicked before click",
+                "Clicked!", button.getText());
+
+        new Actions(getDriver()).moveToElement(button).click().perform();
+        assertEquals("Button should be clicked after click", "Clicked!",
+                button.getText());
+    }
+
+    @Test
     public void testImageRenderer() {
         openTestURL();