Hide sidebar when clicking outside it (#18111)

Change-Id: I0dc8d218f8b9584874e34bf7c38eeae4b89f5df9

4 files changed, 47 insertions, 9 deletions

diff --git a/client/src/com/vaadin/client/widgets/Grid.java b/client/src/com/vaadin/client/widgets/Grid.java
index 1837f4c951..0eabf3686d 100644
--- a/client/src/com/vaadin/client/widgets/Grid.java
+++ b/client/src/com/vaadin/client/widgets/Grid.java
@@ -3065,6 +3065,26 @@ public class Grid<T> extends ResizeComposite implements
 
         private final Grid<?> grid;
 
+        private NativePreviewHandler clickOutsideToCloseHandler = new NativePreviewHandler() {
+
+            @Override
+            public void onPreviewNativeEvent(NativePreviewEvent event) {
+                if (event.getTypeInt() != Event.ONMOUSEDOWN) {
+                    return;
+                }
+
+                // Click outside the panel
+                EventTarget clickTarget = event.getNativeEvent()
+                        .getEventTarget();
+                if (!rootContainer.getElement().isOrHasChild(
+                        Element.as(clickTarget))) {
+                    close();
+                }
+            }
+        };
+
+        private HandlerRegistration clickOutsideToCloseHandlerRegistration;
+
         private Sidebar(Grid<?> grid) {
             this.grid = grid;
 
@@ -3157,6 +3177,8 @@ public class Grid<T> extends ResizeComposite implements
                 addStyleName("opened");
                 removeStyleName("closed");
                 rootContainer.add(content);
+                clickOutsideToCloseHandlerRegistration = Event
+                        .addNativePreviewHandler(clickOutsideToCloseHandler);
             }
             openCloseButton.setHeight("");
         }
@@ -3171,6 +3193,10 @@ public class Grid<T> extends ResizeComposite implements
                 content.removeFromParent();
                 // adjust open button to header height when closed
                 setHeightToHeaderCellHeight();
+                if (clickOutsideToCloseHandlerRegistration != null) {
+                    clickOutsideToCloseHandlerRegistration.removeHandler();
+                    clickOutsideToCloseHandlerRegistration = null;
+                }
             }
         }
 
diff --git a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridColumnHidingTest.java b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridColumnHidingTest.java
index 6392ee6a22..bed8db6f47 100644
--- a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridColumnHidingTest.java
+++ b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridColumnHidingTest.java
@@ -372,10 +372,11 @@ public class GridColumnHidingTest extends GridBasicClientFeaturesTest {
         toggleHidableColumnAPI(6);
         toggleHidableColumnAPI(0);
 
-        verifyColumnHidingTogglesOrder(0, 1, 3, 6);
-
+        // Selecting from the menu closes the sidebar
         clickSidebarOpenButton();
 
+        verifyColumnHidingTogglesOrder(0, 1, 3, 6);
+
         toggleHidableColumnAPI(2);
         toggleHidableColumnAPI(4);
         toggleHidableColumnAPI(7);
@@ -611,6 +612,7 @@ public class GridColumnHidingTest extends GridBasicClientFeaturesTest {
         verifyColumnIsNotFrozen(1);
         verifyColumnIsNotFrozen(2);
 
+        getSidebarOpenButton().click();
         getColumnHidingToggle(2).click();
         verifyColumnIsFrozen(0);
         verifyColumnIsFrozen(1);
@@ -861,7 +863,15 @@ public class GridColumnHidingTest extends GridBasicClientFeaturesTest {
         }
 
         assertEquals(colCount, getGridHeaderRowCells().size());
+    }
 
+    @Test
+    public void testColumnHidingPopupClosedWhenClickingOutside() {
+        selectMenuPath("Component", "Columns", "Column 0", "Hidable");
+        getSidebarOpenButton().click();
+        verifySidebarOpened();
+        findElement(By.className("v-app")).click();
+        verifySidebarClosed();
     }
 
     @Test
diff --git a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/client/GridSidebarContentTest.java b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/client/GridSidebarContentTest.java
index c5092a9c22..619dd5ae12 100644
--- a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/client/GridSidebarContentTest.java
+++ b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/client/GridSidebarContentTest.java
@@ -70,19 +70,14 @@ public class GridSidebarContentTest extends GridBasicClientFeaturesTest {
     }
 
     @Test
-    public void testProgrammaticSidebarToggle() {
+    public void testProgrammaticSidebarOpen() {
         openTestURL();
 
         selectMenuPath("Component", "Columns", "Column 0", "Hidable");
 
         selectMenuPath("Component", "Sidebar", "Toggle sidebar visibility");
 
-        Assert.assertEquals("Sidebar be open", 1,
-                countBySelector(".v-grid-sidebar-content"));
-
-        selectMenuPath("Component", "Sidebar", "Toggle sidebar visibility");
-
-        Assert.assertEquals("Sidebar be closed", 0,
+        Assert.assertEquals("Sidebar should be open", 1,
                 countBySelector(".v-grid-sidebar-content"));
     }
 
@@ -122,6 +117,7 @@ public class GridSidebarContentTest extends GridBasicClientFeaturesTest {
                 "Header (0,1)");
 
         selectMenuPath("Component", "Columns", "Column 2", "Hidable");
+        selectMenuPath("Component", "Sidebar", "Toggle sidebar visibility");
 
         // Adding a new togglable column should have restored the expected order
         assertSidebarMenuItems("Header (0,0)", "Header (0,1)", "Header (0,2)",
diff --git a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridColumnVisibilityTest.java b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridColumnVisibilityTest.java
index e2d7468d08..6e0d7cc87a 100644
--- a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridColumnVisibilityTest.java
+++ b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridColumnVisibilityTest.java
@@ -173,11 +173,14 @@ public class GridColumnVisibilityTest extends GridBasicFeaturesTest {
         assertEquals("Column 1", getColumnHidingToggle(1).getText());
 
         toggleColumnHidingToggleCaptionChange(1);
+
+        getSidebarOpenButton().click();
         assertEquals("column 1", getGridElement().getHeaderCell(0, 1).getText()
                 .toLowerCase());
         assertEquals("Column 1 caption 0", getColumnHidingToggle(1).getText());
 
         toggleColumnHidingToggleCaptionChange(1);
+        getSidebarOpenButton().click();
         assertEquals("Column 1 caption 1", getColumnHidingToggle(1).getText());
     }
 
@@ -192,6 +195,7 @@ public class GridColumnVisibilityTest extends GridBasicFeaturesTest {
         selectMenuPath("Component", "Columns", "Column 1", "Header Type",
                 "Widget Header");
 
+        getSidebarOpenButton().click();
         assertEquals("Column 1", getColumnHidingToggle(1).getText());
     }
 
@@ -243,6 +247,7 @@ public class GridColumnVisibilityTest extends GridBasicFeaturesTest {
         verifyColumnNotFrozen(0);
         verifyColumnNotFrozen(1);
 
+        getSidebarOpenButton().click();
         getColumnHidingToggle(0).click();
         assertColumnHeaderOrder(0, 2, 3, 4, 5);
         verifyColumnFrozen(0);
@@ -277,6 +282,7 @@ public class GridColumnVisibilityTest extends GridBasicFeaturesTest {
         verifyColumnNotFrozen(0);
         verifyColumnNotFrozen(1);
 
+        getSidebarOpenButton().click();
         getColumnHidingToggle(0).click();
         assertColumnHeaderOrder(0, 2, 3, 4, 5);
         verifyColumnNotFrozen(0);