BUG-6029 : Property pane for iFrame widget does not appear on clicking on widget (#6260)

-- Add a overlaid div for iframe

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>
   );

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}