Path parameter issues: "Required field is not provided" or interpolates to a ','

Q&A

• OS: Windows Sub-system for Linux (WSL): Ubuntu 18.04.3 LTS

$ cat /etc/os-release | head -2
NAME="Ubuntu"
VERSION="18.04.3 LTS (Bionic Beaver)"

• Browser: Chrome 79.0.3945.88 & Firefox 68.4.0esr
• Method of installation:

$ npm -v
6.13.4

• Swagger-UI version: 3.24.3
• Swagger/OpenAPI version: OpenAPI 3.0.1

Content & configuration

Example Swagger/OpenAPI definition:
Stripped down version of PetStore example in OpenAPI 3.0.1

{
    "openapi": "3.0.1",
    "info": {
        "description": "This is a sample server Petstore server.  You can find out more about Swagger at [http://swagger.io](http://swagger.io) or on [irc.freenode.net, #swagger](http://swagger.io/irc/).  For this sample, you can use the api key `special-key` to test the authorization filters.",
        "version": "2.0.0",
        "title": "Swagger Petstore",
        "termsOfService": "http://swagger.io/terms/",
        "contact": {
            "email": "apiteam@swagger.io"
        },
        "license": {
            "name": "Apache 2.0",
            "url": "http://www.apache.org/licenses/LICENSE-2.0.html"
        }
    },
    "servers": [
        {
            "url": "https://petstore.swagger.io/v2"
        }
    ],
    "tags": [
        {
            "name": "pet",
            "description": "Everything about your Pets",
            "externalDocs": {
                "description": "Find out more",
                "url": "http://swagger.io"
            }
        }
    ],
    "paths": {
        "/pet/{petId}": {
            "get": {
                "tags": [
                    "pet"
                ],
                "summary": "Find pet by ID",
                "description": "Returns a single pet",
                "operationId": "getPetById",
                "parameters": [
                    {
                        "name": "petId",
                        "in": "path",
                        "description": "ID of pet to return",
                        "required": true,
                        "schema": {
                            "type": "integer",
                            "format": "int64"
                        }
                    }
                ],
                "responses": {
                    "200": {
                        "description": "successful operation",
                        "content": {
                            "application/json": {
                                "schema": {
                                    "$ref": "#/components/schemas/Pet"
                                }
                            },
                            "application/xml": {
                                "schema": {
                                    "$ref": "#/components/schemas/Pet"
                                }
                            }
                        }
                    },
                    "400": {
                        "description": "Invalid ID supplied"
                    },
                    "404": {
                        "description": "Pet not found"
                    }
                }
            }
        }
    },
    "components": {
        "schemas": {
            "Category": {
                "type": "object",
                "properties": {
                    "id": {
                        "type": "integer",
                        "format": "int64"
                    },
                    "name": {
                        "type": "string"
                    }
                },
                "xml": {
                    "name": "Category"
                }
            },
            "Pet": {
                "type": "object",
                "required": [
                    "name",
                    "photoUrls"
                ],
                "properties": {
                    "id": {
                        "type": "integer",
                        "format": "int64"
                    },
                    "category": {
                        "$ref": "#/components/schemas/Category"
                    },
                    "name": {
                        "type": "string",
                        "example": "doggie"
                    },
                    "photoUrls": {
                        "type": "array",
                        "xml": {
                            "wrapped": true
                        },
                        "items": {
                            "type": "string",
                            "xml": {
                                "name": "photoUrl"
                            }
                        }
                    },
                    "tags": {
                        "type": "array",
                        "xml": {
                            "wrapped": true
                        },
                        "items": {
                            "xml": {
                                "name": "tag"
                            },
                            "$ref": "#/components/schemas/Tag"
                        }
                    },
                    "status": {
                        "type": "string",
                        "description": "pet status in the store",
                        "enum": [
                            "available",
                            "pending",
                            "sold"
                        ]
                    }
                },
                "xml": {
                    "name": "Pet"
                }
            },
            "Tag": {
                "type": "object",
                "properties": {
                    "id": {
                        "type": "integer",
                        "format": "int64"
                    },
                    "name": {
                        "type": "string"
                    }
                },
                "xml": {
                    "name": "Tag"
                }
            }
        }
    }
}

Swagger-UI configuration options:

    SwaggerUI({
      docExpansion: 'list',
      domNode: document.getElementById(config.swaggerElementID),
      spec: swaggerJsonObject,
    });

Your query string config: N/A

Describe the bug you're encountering

When the path parameter required property is set to true, all input is rejected with error: Required field is not provided (screenshot 1).

If I set the path parameter required property to false, the path parameter interpolates to a ',' (screenshot 2). I've tried defining the path parameter inline as well as in the components section and various other things, but always get the comma.

Example:

Curl

curl -X GET "https://petstore.swagger.io/v2/pet/," -H "accept: */*"

Request

https://petstore.swagger.io/v2/pet/,

Response body

{
  "code": 404,
  "type": "unknown",
  "message": "java.lang.NumberFormatException: For input string: \",\""
}

To reproduce...

Steps to reproduce the behavior:

1. npm run-script start, which executes react-scripts start
2. Click on 'Try it now'
3. Enter an ID
4. If the path parameter required property is set to true, see error: Required field is not provided, else see server response HTTP 404 Not Found for https://petstore.swagger.io/v2/pet/,

Expected behavior

The path parameter should interpolate properly regardless of whether or not it is required.

Screenshots

Path parameter required property set to true

Path parameter required property set to false

Additional context or thoughts

$ node -v
v12.14.0

Reproduce the behavior with the provided PetStore OpenAPI definition by running npm run-script start and using “Try it now” with both required and optional path parameters. Trace Swagger UI’s path-parameter handling from that entry point; done means the entered ID is interpolated correctly in both cases instead of being rejected or becoming a comma.