Impossible to submit required params in react app which is using SwaggerUi component

Prerequisites

• OS: macOS
• Browser: chrome
• Version: 67
• Method of installation: npm
• Swagger-UI version: 3.17.3
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

Swagger UI is used inside react component. React version is ^16.3.2

Example Swagger/OpenAPI definition: https://raw.githubusercontent.com/OAI/OpenAPI-Specification/master/examples/v3.0/petstore.yaml

Swagger-UI configuration options:

SwaggerUI({
  dom_id: "#swagger",
  url: spec_url,
})

Describe the bug you’re encountering

Impossible to specify the required parameter for routes like /get/{petId}. The UI just remove it when I’m clicking on Try it Out -> Execute button.

To reproduce…

Steps to reproduce the behavior:

1. Click on any route with required parameter. E.g. /pet/{petId}
2. Click “Try it out” button
3. Specify pet id
4. Click on “execute” button
5. See error - pet id was removed, petId field is red. UI doesn’t send any http request

Expected behavior

UI sends the HTTP request and display the results

Screenshots

video

Additional context or thoughts

This is most visible issue that have direct impact on functionality. However, there are tons of JS errors in the chrome console. They appear on almost every stage: page load, authorization modal window, submiting requests, etc.

I think most of problems come from different react versions used in app and swagger ui

Other related issues: textarea with console curl command always show curl -X "undefined" instead of actual command(HTTP request is different)

[shockey]

Fixed!

We’ve just released swagger-ui-react, which declares React as a peer dependency. I’ve tested this module within a React 16 create-react-app, and the required parameter issue is no longer present.

[newdaveespionage]

Adding this note in case someone comes upon this issue and thinks “I’m not integrating this into a React 16 app, why might I be seeing this?”

This also happens in a dev environment running Swagger UI “standalone” with another React-dependent tool being used in the same dev install.

To recreate, install Storybook as a devDependency, and implement a simple one page Swagger UI display separately in the same dev environment (meaning, installed as a devDependency as well) following the Swagger UI documentation. Storybook’s React dependency is hard-set, so it’s impossible to avoid installing 16 in this scenario, and this bug is then exposed for any required field.

I’m looking at breaking either Storybook or Swagger into a separate project, but due to requirements around our project, both have to live in the same repository and aren’t easily built separately.

If I can contribute to one of the outstanding issues in the React 16 epic, I’ll give it a shot.