swagger-ui: Execute button is not working with 'malformed' JSON body

Q&A (please complete the following information)

• OS: Windows 2019
• Browser: Chrome
• Version: 84.0.4147.125
• Method of installation: dist assets
• Swagger-UI version: 3.31.1
• Swagger/OpenAPI version: 2.0

Content & configuration

I’ll skip the content&configuration since the issue can be reproduced with the ‘pet store’ demo.

Describe the bug you’re encountering

I encountered a strange situation with Swagger-UI where the Execute button stopped working without any apparent reason why (nothing in the console or network tab). After investigating I noticed that the issue was caused by a trailing comma in my JSON body.

To reproduce…

Steps to reproduce the behavior:

1. Go to https://petstore.swagger.io/#/pet/addPet
2. Open the ‘Add a new pet to the store’ (it should be opened by default using the link above)
3. Click the Try it out button to activate the UI
4. Replace the body with this JSON (notice the , in the tags section)

{
  "id": 0,
  "category": {
    "id": 0,
    "name": "string"
  },
  "name": "doggie",
  "photoUrls": [
    "string"
  ],
  "tags": [
    {
      "id": 0,
      "name": "string"

         ,

    }
  ],
  "status": "available"
}

1. Click the Execute button

Expected behavior

I’m expecting the request to be sent to the server or some kind of message telling me why the execute didn’t work. It’s a bit strange to click on the Execute button and having nothing happen.