From 63a4c79c9273d7251f80a53b486e34eb8aae3c86 Mon Sep 17 00:00:00 2001
From: 5war00p <maddisaiswaroop@gmail.com>
Date: Mon, 9 Oct 2023 00:52:03 +0530
Subject: [PATCH] fix: set key to iframes to fix browser history stack (back
 button navigation)

---
 apps/web/components/apps/AppPage.tsx      |  2 +-
 packages/features/embed/lib/EmbedTabs.tsx | 17 ++++++++---------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx
index 05c095caa1..deed2501c2 100644
--- a/apps/web/components/apps/AppPage.tsx
+++ b/apps/web/components/apps/AppPage.tsx
@@ -126,7 +126,7 @@ export const AppPage = ({
                 <div
                   key={`iframe-${index}`}
                   className="mr-4 max-h-full min-h-[315px] min-w-[90%] max-w-full snap-center last:mb-0 lg:mb-4 lg:mr-0 [&_iframe]:h-full [&_iframe]:min-h-[315px] [&_iframe]:w-full">
-                  <iframe allowFullScreen {...descriptionItem.iframe} />
+                  <iframe key={`iframe_${index}`} allowFullScreen {...descriptionItem.iframe} />
                 </div>
               ) : (
                 <img
diff --git a/packages/features/embed/lib/EmbedTabs.tsx b/packages/features/embed/lib/EmbedTabs.tsx
index 0671d0c599..a0c86450ee 100644
--- a/packages/features/embed/lib/EmbedTabs.tsx
+++ b/packages/features/embed/lib/EmbedTabs.tsx
@@ -47,19 +47,17 @@ export const tabs = [
             className="text-default bg-default selection:bg-subtle h-[calc(100%-50px)] font-mono"
             style={{ resize: "none", overflow: "auto" }}
             readOnly
-            value={
-              `<!-- Cal ${embedType} embed code begins -->\n` +
-              (embedType === "inline"
+            value={`<!-- Cal ${embedType} embed code begins -->\n${
+              embedType === "inline"
                 ? `<div style="width:${getDimension(previewState.inline.width)};height:${getDimension(
                     previewState.inline.height
                   )};overflow:scroll" id="my-cal-inline"></div>\n`
-                : "") +
-              `<script type="text/javascript">
+                : ""
+            }<script type="text/javascript">
   ${embedSnippetString}
   ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previewState, embedCalOrigin })}
   </script>
-  <!-- Cal ${embedType} embed code ends -->`
-            }
+  <!-- Cal ${embedType} embed code ends -->`}
           />
           <p className="text-subtle hidden text-sm">{t("need_help_embedding")}</p>
         </>
@@ -95,10 +93,10 @@ export const tabs = [
             readOnly
             style={{ resize: "none", overflow: "auto" }}
             value={`/* First make sure that you have installed the package */
-  
+
   /* If you are using yarn */
   // yarn add @calcom/embed-react
-  
+
   /* If you are using npm */
   // npm install @calcom/embed-react
   ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, previewState, embedCalOrigin })}
@@ -126,6 +124,7 @@ export const tabs = [
       }
       return (
         <iframe
+          key={EMBED_PREVIEW_HTML_URL}
           ref={ref as typeof ref & MutableRefObject<HTMLIFrameElement>}
           data-testid="embed-preview"
           className="h-[100vh] border"