Merge pull request #32172 from storybookjs/reset-on-change-story

Core: Prevent `BAIL` state from showing in interactions panel when switching stories

Author: ghengeveld

code/core/src/component-testing/components/Panel.tsx

@@ -247,6 +247,7 @@ export const Panel = memo<{ refId?: string; storyId: string; storyUrl: string }>
       return () => observer?.disconnect();
     }, []);
 
+    const lastStoryId = useRef<string>(undefined);
     const lastRenderId = useRef<number>(0);
     const emit = useChannel(
       {
@@ -261,12 +262,16 @@ export const Panel = memo<{ refId?: string; storyId: string; storyUrl: string }>
           );
         },
         [STORY_RENDER_PHASE_CHANGED]: (event) => {
-          if (event.newPhase === 'preparing' || event.newPhase === 'loading') {
-            // A render cycle may not actually make it to the rendering phase.
+          if (
+            lastStoryId.current === event.storyId &&
+            ['preparing', 'loading'].includes(event.newPhase)
+          ) {
+            // A rerender cycle may not actually make it to the rendering phase.
             // We don't want to update any state until it does.
             return;
           }
 
+          lastStoryId.current = event.storyId;
           lastRenderId.current = Math.max(lastRenderId.current, event.renderId || 0);
           if (lastRenderId.current !== event.renderId) {
             return;

code/core/src/controls/components/SaveStory.stories.tsx

@@ -42,14 +42,12 @@ export const Creating = {
 } satisfies Story;
 
 export const Created: Story = {
-  play: async ({ canvas, context, userEvent }) => {
+  play: async ({ canvas, context }) => {
     await Creating.play(context);
-    const event = userEvent.setup({ delay: null });
 
     const dialog = await canvas.findByRole('dialog');
     const input = await within(dialog).findByRole('textbox');
-    await event.type(input, 'MyNewStory');
-
+    await fireEvent.change(input, { target: { value: 'MyNewStory' } });
     await fireEvent.submit(dialog.getElementsByTagName('form')[0]);
     await expect(context.args.createStory).toHaveBeenCalledWith('MyNewStory');
   },

code/core/src/preview-api/modules/preview-web/render/StoryRender.ts

@@ -116,16 +116,15 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
   }
 
   private checkIfAborted(signal: AbortSignal): boolean {
-    if (signal.aborted) {
+    if (signal.aborted && !['finished', 'aborted', 'errored'].includes(this.phase as RenderPhase)) {
       this.phase = 'aborted';
       this.channel.emit(STORY_RENDER_PHASE_CHANGED, {
         newPhase: this.phase,
         renderId: this.renderId,
         storyId: this.id,
       });
-      return true;
     }
-    return false;
+    return signal.aborted;
   }
 
   async prepare() {