Hide sidebar when clicking outside it (#18111)

Change-Id: I0dc8d218f8b9584874e34bf7c38eeae4b89f5df9

1 files changed, 26 insertions, 0 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;
+                }
             }
         }