Merge pull request #16919 from storybookjs/16862-fix-vue-rerender-vie…

…wMode Core: Be explicit about `viewMode` to fix Vue issue
storybookjs · Dec 6, 2021 · 5543a7e · 5543a7e
2 parents 245ed82 + c2b7147
commit 5543a7e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx
@@ -147,6 +147,7 @@ const Story: FunctionComponent<StoryProps> = (props) => {
         story,
         renderContext,
         element: storyRef.current as HTMLElement,
+        viewMode: 'docs',
       });
       setShowLoader(false);
     }

diff --git a/lib/preview-web/src/PreviewWeb.tsx b/lib/preview-web/src/PreviewWeb.tsx
@@ -562,7 +562,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
       showException: (err: Error) => this.renderException(id, err),
     };
 
-    return this.renderStoryToElement({ story, renderContext, element });
+    return this.renderStoryToElement({ story, renderContext, element, viewMode: 'story' });
   }
 
   // Render a story into a given element and watch for the events that would trigger us
@@ -571,13 +571,15 @@ export class PreviewWeb<TFramework extends AnyFramework> {
     story,
     renderContext: renderContextWithoutStoryContext,
     element: canvasElement,
+    viewMode,
   }: {
     story: Story<TFramework>;
     renderContext: Omit<
       RenderContext<TFramework>,
       'storyContext' | 'storyFn' | 'unboundStoryFn' | 'forceRemount'
     >;
     element: HTMLElement;
+    viewMode: ViewMode;
   }): StoryCleanupFn {
     const { id, applyLoaders, unboundStoryFn, playFunction } = story;
 
@@ -609,7 +611,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
         await runPhase('loading', async () => {
           loadedContext = await applyLoaders({
             ...this.storyStore.getStoryContext(story),
-            viewMode: canvasElement === this.view.storyRoot() ? 'story' : 'docs',
+            viewMode,
           } as StoryContextForLoaders<TFramework>);
         });
         if (abortSignal.aborted) return;