[Bug]: Storybook 7.2.1: When I click on the canvas navlink in mobile view the selected sidebar story is not shown

[djohan-ssg]

Describe the bug

When I click on any story below the first/top one in the sidebar in mobile view (using Firefox v115.0.3) the story is at first correctly displayed to the right (scaled down but I can see that it's the selected story) but as soon as I click on the canvas navlink the story that is shown on the canvas is not the selected story but instead the first/top story in the sidebar.

I doesn't matter which story I choose/select, as soon as I click on the canvas navlink the story "resets" to the first/top one and that is what is displayed on the canvas.

I was previously using storybook 7.0.20 and everything was working fine.
I used "yarn dlx storybook@latest upgrade" to upgrade from 7.0.20 to 7.2.1 and I'm using a mono repo (lerna).

---

Example/repro:

1. Select a story in Sidebar view (page is shown in mobile view)
   

2. Click on Canvas navlink expecting to see the selected story but instead the story gets "reset" to the first/top one in the sidebar
   

To Reproduce

No response

System

Environment Info:

  System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
  Binaries:
    Node: 16.20.0 - ~\AppData\Local\Volta\tools\image\node\16.20.0\node.EXE
    Yarn: 4.0.0-rc.42 - ~\AppData\Local\Volta\tools\image\yarn\4.0.0-rc.42\bin\yarn.CMD
    npm: 8.19.4 - ~\AppData\Local\Volta\tools\image\node\16.20.0\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1992.0), Chromium (114.0.1823.43)

Additional context

No response

[antman999]

Also running into the same issue on mobile https://meridian-design-systems.vercel.app/?path=/docs/getting-started-overview--docs It will lead back to the AppBar/default story

version: 7.2.1

Additional Context
Only happens on mobile view

[v-gevak]

@ndelangen broken here - 683c480

[dgonzalezr]

I can confirm this is still present in Storybook 7.3.2

[Bai2White]

I can confirm this is still present in Storybook 7.4.0

[noorsilkaredia1]

Any update on this?? This issue is a blocker for our QA team.

[ndelangen]

@cdedreuille This seems like something you'd be interested in incorporating into the new mobile UI work?

[cdedreuille]

Yes @ndelangen. I added it to our tracking list here #24124

[JReinhold]

This has been fixed with the revamped mobile UI, that is scheduled for 8.0.

I'll let @shilman decide if he wants to keep this open in an attempt at fixing it in 7.x as well, or if we should just close it now.

[marcomontalbano]

Hi @JReinhold, can you also double-check if the fix solves the following?

I'm running Storybook with docsMode: true and the canvas is always blank on mobile devices.

storybook-docsmode-mobile-devices.mov

To Reproduce

https://stackblitz.com/edit/github-czjhh4?file=.storybook%2Fmain.js

// .storybook/main.js

-  docs: {
-    autodocs: 'tag',
-  },
+  docs: {
+    autodocs: true,
+    docsMode: true,
+  },

Thanks a lot! Would be nice to have the fix in 7.x 🤞

[cdedreuille]

@marcomontalbano It should indeed fix the problem since in the new 8.0 version we are not touching the size of the preview. We are simply adding navigation items on top of the preview.

[pegondo]

@marcomontalbano, do we have an ETA for v8.0.0?

[marcomontalbano]

@marcomontalbano, do we have an ETA for v8.0.0?

I don't know. @cdedreuille do you have an answer for that? Thanks!

[cdedreuille]

It's a bit hard to say right now to know when 8.0 will be released as this will be quite an important update. It seems that both bugs are related to opening and closing the sidebar on mobile, right? I know it's not ideal but refreshing the page should solve the issue for now. I'm not sure this is a problem we'll have the time to fix in 7.x to be honest.

[pegondo]

Thanks, @marcomontalbano and @cdedreuille, I know it's hard to estimate releases, it was just in case you had a date in mind.

[dutscher]

The bug is still there on latest "You are on Storybook 7.6.17"
Has anyone tested this in 8.0?

cheers