From a92b7595dbf08608ab45aa713bd7e25052dff29a Mon Sep 17 00:00:00 2001
From: Paul Li <82799722+wmdev0808@users.noreply.github.com>
Date: Mon, 9 Aug 2021 05:51:33 -0400
Subject: [PATCH] BUG-6029 : Property pane for iFrame widget does not appear on
 clicking on widget (#6260)

-- Add a overlaid div for iframe
---
 .../blueprint/IframeComponent.tsx             | 27 +++++++++++++++++++
 app/client/src/widgets/IframeWidget.tsx       |  2 ++
 2 files changed, 29 insertions(+)

diff --git a/app/client/src/components/designSystems/blueprint/IframeComponent.tsx b/app/client/src/components/designSystems/blueprint/IframeComponent.tsx
index 7e7444c283..3d161cf6ab 100644
--- a/app/client/src/components/designSystems/blueprint/IframeComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/IframeComponent.tsx
@@ -3,6 +3,9 @@ import styled from "styled-components";
 
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
 import { hexToRgba } from "components/ads/common";
+import { AppState } from "reducers";
+import { useSelector } from "store";
+import { RenderMode, RenderModes } from "constants/WidgetConstants";
 
 interface IframeContainerProps {
   borderColor?: string;
@@ -11,6 +14,7 @@ interface IframeContainerProps {
 }
 
 export const IframeContainer = styled.div<IframeContainerProps>`
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -34,7 +38,16 @@ export const IframeContainer = styled.div<IframeContainerProps>`
   }
 `;
 
+const OverlayDiv = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;
+
 export interface IframeComponentProps extends ComponentProps {
+  renderMode: RenderMode;
   source: string;
   title?: string;
   onURLChanged: (url: string) => void;
@@ -51,8 +64,10 @@ function IframeComponent(props: IframeComponentProps) {
     borderWidth,
     onMessageReceived,
     onURLChanged,
+    renderMode,
     source,
     title,
+    widgetId,
   } = props;
 
   const [message, setMessage] = useState("");
@@ -74,12 +89,24 @@ function IframeComponent(props: IframeComponentProps) {
     }
   }, [source]);
 
+  const isPropertyPaneVisible = useSelector(
+    (state: AppState) => state.ui.propertyPane.isVisible,
+  );
+  const selectedWidgetId = useSelector(
+    (state: AppState) => state.ui.propertyPane.widgetId,
+  );
+
   return (
     <IframeContainer
       borderColor={borderColor}
       borderOpacity={borderOpacity}
       borderWidth={borderWidth}
     >
+      {renderMode === RenderModes.CANVAS &&
+        !(isPropertyPaneVisible && widgetId === selectedWidgetId) && (
+          <OverlayDiv />
+        )}
+
       {message ? message : <iframe src={source} title={title} />}
     </IframeContainer>
   );
diff --git a/app/client/src/widgets/IframeWidget.tsx b/app/client/src/widgets/IframeWidget.tsx
index 390ad5dfe4..81d482525a 100644
--- a/app/client/src/widgets/IframeWidget.tsx
+++ b/app/client/src/widgets/IframeWidget.tsx
@@ -141,6 +141,7 @@ class IframeWidget extends BaseWidget<IframeWidgetProps, WidgetState> {
       borderColor,
       borderOpacity,
       borderWidth,
+      renderMode,
       source,
       title,
       widgetId,
@@ -153,6 +154,7 @@ class IframeWidget extends BaseWidget<IframeWidgetProps, WidgetState> {
         borderWidth={borderWidth}
         onMessageReceived={this.messageReceivedHandler}
         onURLChanged={this.urlChangedHandler}
+        renderMode={renderMode}
         source={source}
         title={title}
         widgetId={widgetId}