Inconsistent scroll position on page load when navigating to a specific endpoint

[brandonabajelo-zoom]

What happens?

First of all, massive congrats to everyone for this scalar project. It really is top notch in a lot of ways compared to other similar tools out there. It has been a joy to use and I'm excited to see how far this package goes.

For context, I have been using the react wrapper in a next 13 app: "@scalar/api-reference-react": "^0.3.106"

      <ApiReferenceReact
        configuration={{
          spec: { content: spec },
          withDefaultFonts: false,
          hideModels: true,
          tagsSorter: 'alpha',
          searchHotKey: 'k',
          hideDarkModeToggle: true,
          hideDownloadButton: true,
          hiddenClients: specType === 'events' ? true : [],
          defaultHttpClient: {
            targetKey: 'shell',
            clientKey: 'curl',
          },
          operationsSorter: 'alpha'
        }}
      />

One issue I'm seeing pretty consistently is when I attempt to navigate to a specific api endpoint url (not just the root of the page), scalar attempts to scroll to the correct position, but it doesn't always consistently take me to the endpoint I'm looking for. Sometimes it does, sometimes it doesn't, sometimes the scroll stops on a section that needs "Show more". The problem still persists even with { defaultOpenAllTags: true }, so that leads to me believe the issue may either be with my css, or within the package itself. Potentially the calculation of page height is effecting something? Overflow-x issue?

I do have a fixed header on top of the scalar component, where I'm setting --scalar-custom-header-height to account for the height of my custom header. Perhaps this is messing up some calculation?

root.style.setProperty('--scalar-custom-header-height', ${headerHeight}px);

I imagine others have run into this before and I'm curious if there are any tips or recommendations for how to resolve! Please let me know if I can share more details.

Much appreciated!

What did you expect to happen?

Regardless of whats tags are open or not, i expect all URLs to scroll to their appropriate position.

OpenAPI Document

No response

[amritk]

Oh I believe we may have just fixed this! Try the latest version

[brandonabajelo-zoom]

hey @amritk still seeing the same thing after the version bump, though it does appear improved.

[amritk]

Sure thing can take a look

[amritk]

Okay I was testing in our react example and it seems to be working, any chance you can setup a minimal reproduction?

[GrahamSH-LLK]

@amritk I can reproduce this- or at least something very similar. In a remix app, it takes at least 2 clicks to properly scroll. Here's a repro: https://stackblitz.com/edit/remix-run-remix-svgnyd?file=app%2Froutes%2F_index.tsx

[brandonabajelo-zoom]

hey @amritk let me know if the above example helps^^

[amritk]

The stackblitz doesn't seem to run for me, but I'll start a fresh remix project and copy that over

[GrahamSH-LLK]

The stackblitz doesn't seem to run for me, but I'll start a fresh remix project and copy that over

👍 Works on my end, so it's probably some stupid permission issue. It's a dead simple repro though, so should be pretty easy to get it running externally.

[amritk]

Hey by any chance, is this related to your issue?

https://discord.com/channels/1135330207960678410/1291168248930238585/1291391749234757695

Ah this turned out to be an issue on our end related to our remix configuration. Here's what I found: In order to fix some scroll restoration issues that were caused by remix-run interfering with Scalar, we used the following from Remix's docs site: https://github.com/remix-run/react-router-website/blob/main/app/ui/delegate-markdown-links.ts ... however, this seemed to interfere with the routing mechanism within the scalar test request modal (see video above).

The solution I've come up with for now is to simply bypass the DelegateMarkdownLinks behavior when click events occur within the test request modal:

const isInScalarTestRequestModal = event.target.closest('.scalar-client');
if (isInScalarTestRequestModal) return;

Hope this is helpful if anyone else is trying to add Scalar to a remix project!

[brandonabajelo-zoom]

Hi @amritk -- my particular issue is not related to remix at all as I'm using next js

[GrahamSH-LLK]

Hey by any chance, is this related to your issue?

https://discord.com/channels/1135330207960678410/1291168248930238585/1291391749234757695

Ah this turned out to be an issue on our end related to our remix configuration. Here's what I found: In order to fix some scroll restoration issues that were caused by remix-run interfering with Scalar, we used the following from Remix's docs site: https://github.com/remix-run/react-router-website/blob/main/app/ui/delegate-markdown-links.ts ... however, this seemed to interfere with the routing mechanism within the scalar test request modal (see video above).

The solution I've come up with for now is to simply bypass the DelegateMarkdownLinks behavior when click events occur within the test request modal:

const isInScalarTestRequestModal = event.target.closest('.scalar-client');
if (isInScalarTestRequestModal) return;

Hope this is helpful if anyone else is trying to add Scalar to a remix project!

This fixed the api links but broke models unfortunately (models worked without the fix for some reason)

[amritk]

Alright I see it (in next.js) its lazy loading related

[brandonabajelo-zoom]

@amritk can you share what you are seeing?

[amritk]

Sorry just working on something else at the moment. Can jump back on this next week!

[GrahamSH-LLK]

Sorry just working on something else at the moment. Can jump back on this next week!

Any updates?

[amritk]

its #2 on my list right now! I wonder if github lets you show your queue of what you are working on

[amritk]

hey @GrahamSH-LLK these seem to be two separate issues. Want to open up another one and we can discuss it there? Also I tried the stack blitz and it seems to be working?

[amritk]

Alright for this issue, it looks like it shows the next item down, then it scrolls to the correct one

[amritk]

Alright got a PR up with a fix for this one

https://github.com/scalar/scalar/pull/3691

[brandonabajelo-zoom]

@amritk just fyi im still noticing the same issue on my end. When attempting to load an endpoint towards the bottom of the list, it just throws you to a random part of the page. almost like it gets hung up on unopened tags and just gives up.

[amritk]

Hmm kk I definitely fixed on of the issues. Do you think you could make me a minimal repro?

[mahdiyari]

I'm using pure HTML and loading the library from the following cdn just like the documentations:

<script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>

When you click on the endpoints from the sidebar, it sometimes jumps to the one endpoint below the clicked endpoint. There is nothing interfering here as there is nothing else imported to that HTML file.

I can dump my html code and openapi spec here if necessary.

[amritk]

Yes please! Just so I can see whats happening

[mahdiyari]

Rename to html and open in a browser then open all the tags in the sidebar and click links from the different tags and sometimes it will navigate to one link below what you clicked on. test.txt