explorer select resets to first option upon refresh

[talkohavy]

What I am using:

I'm using the explorer's select in the topbar to view several swagger docs. The select is working great, and upon clicking on each it switches to the relevant url that hosts the desired swagger json.

What is the problem:

The problem starts when I refresh the page. Let's say I have 3 swagger schemas/options in the dropdown:

• All
• Images
• Users

presented just as in the above order. "All" is first, "Images" is second, "Users" is third. Let's say i'm now on Users schema, so my url looks like this:

http://localhost:5000/api-docs/?urls.primaryName=Users

If I were to refresh the page at this point, the url would stay the same, however the select would revert back to the first option ("All"), and the schema to be loaded would match that first option! The Question is: How can I make it so that upon refresh, the select will preserve my current selected option and load the swagger json that matches? I know that I can pass a custom.js file, and I could probably implement a waitForSelector function to wait for the "select" id, and then do a programmatic click() somehow, but it sounds like too much of a work-around, and this seems like an operation that should be given out-of-the-box by swagger-ui-express, isn't it? Could you please implement some logic that uses the "urls.primaryName" query param to load a swagger json based on its value? 🙏🏼

Additional information:

This is how I am using swagger-ui-express:

server.js

// Step 1: import swagger's extra options
import { swaggerExtraOptions } from './swagger';
// Step 2: host all swagger.json files (i.e. all.json, images.json, users.json)
app.use('/api-docs', express.static('./src/swagger'));
// Step 3: basic swagger-ui-express usage according to the documentation
app.use(
    '/api-docs',
    swaggerUi.serve,
    swaggerUi.setup(null, swaggerExtraOptions)
  );

swaggerExtraOptions object

const swaggerExtraOptions = {
    // customJs: './custom.js', // I'd prefer not to use it if possible...
    explorer: true,
    swaggerOptions: { 
        urls: [
            {
                name: "All",
                url: "http://localhost:5000/api-docs/configs/all.json",
            },
            {
                name: "Images",
                url: "http://localhost:5000/api-docs/configs/images.json",
            },
            {
                name: "Users",
                url: "http://localhost:5000/api-docs/configs/users.json",
            }
        ]
    },
  };

[scottie1984]

I think this issue is with the Swagger UI and would be best placed fixed by them. Happy to take a PR to fix in this module but feel it would he best place fixed in Swagger UI therefore its fixed across the board.

[talkohavy]

Hey Scottie,

Alright then. Since i'm not really sure what the cause for the issue is, I trust that you (as the maintainer) know best. If you turly think that the fix is better suited over at Swagger UI itself, and that a fix here at swagger-ui-express is merely a workaround, then feel free to close this issue.

As per your suggestion, I opened a similar issue over at Swagger UIs GitHub, and can be found here: https://github.com/swagger-api/swagger-ui/issues/8233#issue-1410096307

If you could perhaps by any chance add a commaent there to better explain to the maintainers where the issue stems from and what needs/could be done, that would definitely help! 💯

[scottie1984]

Maybe there is a fix for this: https://github.com/swagger-api/swagger-ui/issues/8039

UPDATE: I just tested in the latest version of swagger-ui and it looks fixed to me.

[talkohavy]

I'm sorry to ask, but could you please provide with a working example? Because i'm using swagger-ui-express latest version (which is at the time of writing is 4.5.0), and it's still not working... And i'm using a very very basic example, super light-weight, however query params onload aren't taken into account in the select over at the top bar. It always reverts to the first option.

[scottie1984]

The issue was fixed very recently within swagger-ui. This module uses the latest swagger-ui-dist module when you install.

So depending when you did the install you will get a different version of swagger-ui.

To make sure you have the latest version uninstall swagger-ui-express and reinstall.

[talkohavy]

Alright! It works great now :) Thank you!

I re-installed like you said. That did it.