Bug: ensure src of iframe for a ref stays the same, unless the version changes

code/ui/manager/src/components/preview/FramesRenderer.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { Fragment, useMemo, useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import type { Combo } from '@storybook/manager-api';
 import { Consumer } from '@storybook/manager-api';
 import { Button, getStoryHref } from '@storybook/components';
@@ -40,9 +40,17 @@ const whenSidebarIsVisible = ({ state }: Combo) => ({
   selectedStoryId: state.storyId,
 });
 
+const styles: CSSObject = {
+  '#root [data-is-storybook="false"]': {
+    display: 'none',
+  },
+  '#root [data-is-storybook="true"]': {
+    display: 'block',
+  },
+};
+
 export const FramesRenderer: FC<FramesRendererProps> = ({
   refs,
-  entry,
   scale,
   viewMode = 'story',
   refId,
@@ -57,50 +65,42 @@ export const FramesRenderer: FC<FramesRendererProps> = ({
   });
   const active = getActive(refId, refs);
 
-  const styles = useMemo<CSSObject>(() => {
-    // add #root to make the selector high enough in specificity
-    return {
-      '#root [data-is-storybook="false"]': {
-        display: 'none',
-      },
-      '#root [data-is-storybook="true"]': {
-        display: 'block',
-      },
-    };
-  }, []);
+  const autoInjectedRefs = Object.values(refs).filter((ref) => {
+    return ref.type === 'auto-inject';
+  }, {});
 
+  const selectedRef = refs[refId];
   const [frames, setFrames] = useState<Record<string, string>>({
     'storybook-preview-iframe': getStoryHref(baseUrl, storyId, {
       ...queryParams,
       ...(version && { version }),
       viewMode,
     }),
+    ...(selectedRef
+      ? {
+          [`storybook-ref-${selectedRef.id}`]: `${selectedRef.url}/iframe.html?id=${storyId}&viewMode=${viewMode}&refId=${selectedRef.id}${stringifiedQueryParams}`,
+        }
+      : {}),
+    ...autoInjectedRefs.reduce((acc, ref) => {
+      return {
+        ...acc,
+        [`storybook-ref-${ref.id}`]: `${ref.url}/iframe.html?id=${storyId}&viewMode=${viewMode}&refId=${ref.id}${stringifiedQueryParams}`,
+      };
+    }, {}),
   });
 
-  useEffect(() => {
-    const newFrames = Object.values(refs)
-      .filter((r) => {
-        if (r.indexError) {
-          return false;
-        }
-        if (r.type === 'auto-inject') {
-          return true;
-        }
-        if (entry && r.id === entry.refId) {
-          return true;
-        }
+  const refExists = !!frames[`storybook-ref-${selectedRef?.id}`];
 
-        return false;
-      })
-      .reduce((acc, r) => {
+  useEffect(() => {
+    if (selectedRef && !refExists) {
+      setFrames((values) => {
         return {
-          ...acc,
-          [`storybook-ref-${r.id}`]: `${r.url}/iframe.html?id=${storyId}&viewMode=${viewMode}&refId=${r.id}${stringifiedQueryParams}`,
+          ...values,
+          [`storybook-ref-${selectedRef.id}`]: `${selectedRef.url}/iframe.html?id=${storyId}&viewMode=${viewMode}&refId=${selectedRef.id}${stringifiedQueryParams}`,
         };
-      }, frames);
-
-    setFrames(newFrames);
-  }, [storyId, entry, refs]);
+      });
+    }
+  }, [selectedRef, refExists, refId, storyId, stringifiedQueryParams, viewMode]);
 
   return (
     <Fragment>
@@ -117,19 +117,22 @@ export const FramesRenderer: FC<FramesRendererProps> = ({
           return null;
         }}
       </Consumer>
-      {Object.entries(frames).map(([id, src]) => (
-        <Fragment key={id}>
-          <IFrame
-            active={id === active}
-            key={refs[id] ? refs[id].url : id}
-            id={id}
-            title={id}
-            src={src}
-            allowFullScreen
-            scale={scale}
-          />
-        </Fragment>
-      ))}
+      {Object.entries(frames).map(([id, src]) => {
+        const [key] = frames[id] ? frames[id].split('?') : [id];
+        return (
+          <Fragment key={id}>
+            <IFrame
+              active={id === active}
+              key={key}
+              id={id}
+              title={id}
+              src={src}
+              allowFullScreen
+              scale={scale}
+            />
+          </Fragment>
+        );
+      })}
     </Fragment>
   );
 };