deepLinking setting not working as expected - does not scroll down properly

phillipmovista commented 5 years ago

Q&A (please complete the following information)

OS: macOS
Browser: Chrome
Version: 75.0.3770.100
Method of installation: direct js files
Swagger-UI version: Newest, I believe
Swagger/OpenAPI version: OpenAPI 3

Content & configuration

I have inherited a project from someone else setting up swagger-ui standalone in our website, importing a list of URLs from a JSON file and trying to use deepLinking to jump straight to operations in the page so I can link around from page to page.

Swagger-UI configuration options: I load up the urlsListFile to grab the data and then drop it into the urls as an array (I would be totally happy with a different way of doing this, but I need to pick the urlsListFile based on version selected in another part of the site)

  jQuery.getJSON(urlsListFile, function( data ) {
    const ui = SwaggerUIBundle({
      urls: data.urls,
      dom_id: '#swagger-ui',
      deepLinking: true,
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ],
      plugins: [
        SwaggerUIBundle.plugins.DownloadUrl
      ],
      supportedSubmitMethods: [],
      layout: "StandaloneLayout"
    });

    window.ui = ui;
  })

I got this URL by clicking on the Location section of the Locations API page and it created this for me. I copied and put it in another section of my site.

?urls.primaryName=Locations#/Location

Describe the bug you're encountering

When the page loads up for Locations API, it just stays at the top of the page and does not scroll down to #/Location like I would expect it to.

To reproduce...

This is on a local development environment so I cannot share a link right now, but any suggestions of things to try, parameters to add, etc - would be appreciated.

If someone knows how also, when I do the markup for a link on one of my other pages, it always adds target=_blank which I do not want because I am linking around the same site, how can I get rid of that?

Is it possible that having the urls.primaryName in my URL is causing a problem? All the working examples do not have that.

Expected behavior

When the link is visited to jump from one page directly to the GET call for Location/getLocation - I expect the page to scroll down, just like the example in https://github.com/swagger-api/swagger-ui/issues/4817#issuecomment-415305023 where it goes to /pet/addPet as a direct jump.

Additional context or thoughts

Thanks so much for the help. I have spent a lot of time getting the documentation together for this project and look forward to wrapping up the linking, etc.

shockey commented 5 years ago

Hey @phillipmovista!

Does this problem go away if, instead of using urls in your constructor and urls.primaryName in your query string, you put url: <your Locations API URL> in your constructor?

I have a hunch that this is rooted in the deep linking plugin doing its work before the urls.primaryName has kicked in.

phillipmovista commented 5 years ago

If I am testing as you as asking me to...no this did not work. I changed it to url: ".....Locations.json" and it does still load up properly and at the top of the page instead of the dropdown list is now just has the box with the json file name and Explore button - but it still just scrolls down only to the title of the page and not past that. I made sure the URL I am navigating to is clean and does not include the old urls.primaryName link and my configuration also has the taken out:

const ui = SwaggerUIBundle({
      url: "........./json/Locations.json",
      dom_id: '#api-docs',
      deepLinking: true,
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ],
      plugins: [
        SwaggerUIBundle.plugins.DownloadUrl
      ],
      supportedSubmitMethods: [],
      layout: "StandaloneLayout"
    });

Other thoughts of things to try? Thanks for the help

shockey commented 5 years ago

@phillipmovista gotcha, thanks for investigating it on your end.

To dig in further, I think I'm going to need a look at the definition you're having issues with. If it's private, feel free to email it to me at kyle.shockey@smartbear.com.

If someone knows how also, when I do the markup for a link on one of my other pages, it always adds target=_blank which I do not want because I am linking around the same site, how can I get rid of that?

No way to configure this now, but it's happening here. Perhaps we can expose the parser reference in the plugin system so you can customize it directly, would be happy to consider a PR for that!

phillipmovista commented 5 years ago

@shockey - I have emailed you details. thank you!

phillipmovista commented 5 years ago

I emailed Kyle about this already, but to most likely conclude this thread, what ended up being my problem was that this was included in my site:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

When I removed this css reference, the deepLinking started working as expected.

Kyle helped me to notice that my swagger-ui code was a bit old (3.19.0 instead of 3.23.1) and once I updated that, it did not fix the problem alone.

Is there a step someone should take to figure out why this bootstrap.css file collides with the deepLinking process?

Thanks again for all the help

shockey commented 5 years ago

Is there a step someone should take to figure out why this bootstrap.css file collides with the deepLinking process?

Absolutely, I'm going to keep this report open and dig into the underlying cause.

swagger-api / swagger-ui