Inconvenient "copy to clipboard" button behaviour

[jabacrack]

Q&A (please complete the following information)

• OS: Windows 10
• Browser: Firefox
• Version: 103.0.1
• Method of installation: npm]
• Swagger-UI version: 4.13.2
• Swagger/OpenAPI version: Swagger 2.0

To reproduce...

Steps to reproduce the behavior:

1. Move mouse pointer to click expand button
2. "Copy to clipboard" button displayed and shift expand button to the left
3. Real click go to authorization button

[nerdyman]

+1 the feature is really useful but the functionality is frustrating as you now have to guess where the button you really want to click will be.

Having a static copy button would be ideal, #8131 also suggests moving it to the right which might be better?

I'm happy to do a PR if there's a decision on how best to do it.

[tim-lai]

It seems that the expand up/down icon is the action that can get users to notice additional icons, so that's good imho. However, I agree that depending on where the user hovers over the operation, the mouse pointer may "rest" over a non-first choice of action icons.

Although a good suggestion is provided in #8131, I would prefer not to place any action button(s) on the left. I think it clutters UX because there's not sufficient number of actions where they should be placed on both sides of the primary operation "button".

• Would it help to reverse the order of the icons?
  Note, in SwaggerEditor, there exists a third icon for "jumping" to a path. Current order: authorize, copy to clipboard, jump to path.

• Would it help to insert a (div) spacer between the expand icon and the list of additional action icons?

My take is that since the lock icon would alway be visible (if it exists), it should stay next to the expand icon as repositioning it would be awkward. So I think order should not change, and that the best UX option would be insert a spacer or a possibly spacer icon (e.g. ... in svg format) in one of the following order:

Option 1: focus on the expand, imply extension to other actions
expand | ... spacer... | lock | copy | jump

or

Option 2: maintain non-hover appearance, then extend to the icons that only display onHover
expand | lock | ... spacer... | copy | jump

Atm, my preference is for option 2, as it is less visual difference between the hover states.

[BasilaryGroup]

The current behaviour is very annoying. I move the mouse to click on the lock icon and it moves away so I can't click on it.

• reverse the icon order so the lock icon does not run away
• keep all of the icons visible. In my implementation, there are only 3 visible after the annoying expand event
• add an option to disable the expand behaviour

I'm not sure about "...that can get users to notice additional icons...". Yeah, it gets my attention every time and a few choice words I shouldn't repeat in public.

Others have complained here in issue #3523 and here.

[CzBuCHi]

just sumbled uppon this and my quick & dirty (but working) solution to this issue looks like this:

 app.UseSwaggerUI(
            c => {
                c.SwaggerEndpoint("/swagger/v1/swagger.json", "V1");
                c.InjectStylesheet("/swagger/custom.css");
            }
        );

const string CustomStyles = @"
.swagger-ui .opblock .opblock-summary .view-line-link {
    margin: 0 5px;
    width: 24px;
}
";

app.MapGet("/swagger/custom.css", [SwaggerApiIgnore]() => Results.Text(CustomStyles, "text/css", Encoding.UTF8));

( it will simply apply :hover styles to .view-line-link even when mouse is not hovering parent .opblock-summary-post div )

[bobwah]

Adding to @CzBuCHi, for those without the ability to add minimal API definitions :

 /// <summary>
 /// Fix the copy to clipboard pop-out which clears the clipboard of my bearer token I want to auth...
 /// </summary>
 [ApiVersion("1.0")]
 [ApiController]
 public class SwaggerFixController
 {
     [Route("/swagger/custom.css")]
     [ApiExplorerSettings(IgnoreApi = true)]
     public ContentResult GetCustomCss(CancellationToken cancellationToken)
     {
         string css = @".swagger-ui .opblock .opblock-summary .view-line-link 
                         {
                             margin: 0 5px;
                             width: 24px;
                         };";

         return new ContentResult
         {
             Content = css,
             ContentType = "text/css"
         };
     }
 }

app.UseSwaggerUI(
            c => {
                c.SwaggerEndpoint("/swagger/v1/swagger.json", "V1");
                c.InjectStylesheet("/swagger/custom.css");
            }
        );

[karamfil]

please fix this!

[dinbtechit]

This is driving me nuts!

just sumbled uppon this and my quick & dirty (but working) solution to this issue looks like this:

 app.UseSwaggerUI(
            c => {
                c.SwaggerEndpoint("/swagger/v1/swagger.json", "V1");
                c.InjectStylesheet("/swagger/custom.css");
            }
        );

const string CustomStyles = @"
.swagger-ui .opblock .opblock-summary .view-line-link {
    margin: 0 5px;
    width: 24px;
}
";

app.MapGet("/swagger/custom.css", [SwaggerApiIgnore]() => Results.Text(CustomStyles, "text/css", Encoding.UTF8));

( it will simply apply :hover styles to .view-line-link even when mouse is not hovering parent .opblock-summary-post div )

This was very helpful. This is bad UX Swagger needs to fix this ASAP.

[char0n]

Addressed by #9111