When there are multiple security schemes, the authorization modal partially scrolls and does not necessarily focus the first text box

[mapitman]

Q&A (please complete the following information)

• OS: Any
• Browser: Any
• Version:
• Method of installation: Any
• Swagger-UI version: 3.35.2 and up
• Swagger/OpenAPI version: OpenAPI 3.0.1

Content & configuration

Example Swagger/OpenAPI definition:

https://api.gettyimages.com/swagger/v3/swagger.json

Swagger-UI configuration options:

SwaggerUI({"urls":[{"url":"/swagger/v3/swagger.json","name":"Getty Images API"}],"deepLinking":true,"displayOperationId":false,"defaultModelsExpandDepth":0,"defaultModelExpandDepth":1,"defaultModelRendering":"example","displayRequestDuration":false,"docExpansion":"none","showExtensions":false,"showCommonExtensions":false,"supportedSubmitMethods":["get","put","post","delete","options","head","patch","trace"],"validatorUrl":"https://online.swagger.io/validator","tryItOutEnabled":true}');
            var oauthConfigObject = JSON.parse('{"clientId":"","clientSecret":"","scopeSeparator":" ","scopes":[],"useBasicAuthenticationWithAccessCodeGrant":false,"usePkceWithAuthorizationCodeGrant":false})

Describe the bug you're encountering

After clicking the Authorize button, the Available Authorizations modal scrolls down about halfway. Our API requires at least an API Key, so the user has to scroll it back to the top and click the textbox.

To reproduce...

Steps to reproduce the behavior:

1. Go to https://api.gettyimages.com/swagger/
2. Click on 'Authorize'
3. Notice that the modal has scrolled down.

Expected behavior

I would expect the modal not to automatically scroll and to set the focus on the first input tag.

Screenshots

This is what's happening:

This is what I would expect instead:

Additional context or thoughts

It looks like this was introduced with PR #6483. Rather than hard-coding the autoFocus attribute, I think a better approach would be to add JavaScript to set focus to the first input element on the form.

I'm not familiar with React, but I do have a naive change that fixes the issue. I'll submit a PR and I'll take feedback if there is a better way to handle this.

[tim-lai]

Hi @mapitman, PR #6483 did not consider scenarios when multiple form elements are available, so this was an oversight that would be nice to get fixed.

[vladohotnikov]

Hi. I got same issue. @mapitman are you going to open MR based on your changes?

https://github.com/mapitman/swagger-ui/commit/b9ed70e0a4f278b45fa9b0db5c9800f49447f339