From 591a5d3effa52ec1891672a1a0a748d385adaa9d Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Wed, 13 May 2020 19:58:27 +0530
Subject: [PATCH] Close property pane when clicking outside the property pane.
 Select widget when toggling open the property pane.

---
 .../components/editorComponents/DraggableComponent.tsx    | 3 +++
 .../components/editorComponents/WidgetNameComponent.tsx   | 8 +++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/client/src/components/editorComponents/DraggableComponent.tsx b/app/client/src/components/editorComponents/DraggableComponent.tsx
index 00e7c4b98f..c867fac986 100644
--- a/app/client/src/components/editorComponents/DraggableComponent.tsx
+++ b/app/client/src/components/editorComponents/DraggableComponent.tsx
@@ -139,6 +139,9 @@ const DraggableComponent = (props: DraggableComponentProps) => {
       selectWidget &&
         selectedWidget !== props.widgetId &&
         selectWidget(props.widgetId);
+      selectedWidget !== props.widgetId &&
+        showPropertyPane &&
+        showPropertyPane();
     }
     e.stopPropagation();
   };
diff --git a/app/client/src/components/editorComponents/WidgetNameComponent.tsx b/app/client/src/components/editorComponents/WidgetNameComponent.tsx
index f01ca54de9..2075c3fdf9 100644
--- a/app/client/src/components/editorComponents/WidgetNameComponent.tsx
+++ b/app/client/src/components/editorComponents/WidgetNameComponent.tsx
@@ -8,7 +8,10 @@ import { theme } from "constants/DefaultTheme";
 import { Colors } from "constants/Colors";
 import { PropertyPaneReduxState } from "reducers/uiReducers/propertyPaneReducer";
 import { Tooltip } from "@blueprintjs/core";
-import { useShowPropertyPane } from "utils/hooks/dragResizeHooks";
+import {
+  useShowPropertyPane,
+  useWidgetSelection,
+} from "utils/hooks/dragResizeHooks";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { WidgetOperations } from "widgets/BaseWidget";
 import { WidgetType } from "constants/WidgetConstants";
@@ -66,6 +69,8 @@ type WidgetNameComponentProps = {
 export const WidgetNameComponent = (props: WidgetNameComponentProps) => {
   const { updateWidget } = useContext(EditorContext);
   const showPropertyPane = useShowPropertyPane();
+  // Dispatch hook handy to set a widget as focused/selected
+  const { selectWidget } = useWidgetSelection();
   const propertyPaneState: PropertyPaneReduxState = useSelector(
     (state: AppState) => state.ui.propertyPane,
   );
@@ -122,6 +127,7 @@ export const WidgetNameComponent = (props: WidgetNameComponentProps) => {
         widgetId: props.widgetId,
       });
       showPropertyPane && showPropertyPane(props.widgetId, undefined, true);
+      selectWidget && selectWidget(props.widgetId);
     } else {
       AnalyticsUtil.logEvent("PROPERTY_PANE_CLOSE_CLICK", {
         widgetType: props.type,