Body Edit Value loses focus after each character

[pneben]

Q&A (please complete the following information)

• OS: [e.g. macOS] Windows
• Browser: [e.g. chrome, safari] Chrome, Edge
• Version: [e.g. 22] Latest
• Method of installation: [e.g. npm, dist assets] npm
• Swagger-UI version: [e.g. 3.10.0]
• Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0] Swagger 2.0, OpenAPI 3.0

Content & configuration

Example Swagger/OpenAPI definition:

// 20210830231830
// http://localhost:8080/api-docs/swagger.json

{
  "basePath": "/",
  "info": {
    "title": "My api",
    "version": "1.0.0"
  },
  "paths": {
    "/controller/": {
      "get": {
        "operationId": "apiGetControllers",
        "tags": [
          "Controller"
        ],
        "description": "Test",
        "responses": {
          "200": {
            "description": "Ok"
          }
        },
        "produces": [
          "application/json"
        ],
        "consumes": [
          "application/json"
        ]
      }
    },
    "/controller/create": {
      "post": {
        "operationId": "apiCreateController",
        "tags": [
          "Controller"
        ],
        "description": "Creates a Controller",
        "consumes": [
          "application/json"
        ],
        "parameters": [
          {
            "name": "body",
            "in": "body",
            "schema": {
              "$ref": "#/definitions/ControllerCreateInput"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Ok"
          }
        },
        "produces": [
          "application/json"
        ]
      }
    }
  },
  "tags": [
    {
      "name": "Controller"
    }
  ],
  "schemes": [
    "http"
  ],
  "produces": [
    "application/json"
  ],
  "consumes": [
    "application/json"
  ],
  "definitions": {
    "ControllerConfigCreateInput": {
      "type": "object",
      "properties": {
        "role": {
          "type": "string",
          "description": "Controllers Role"
        },
        "group": {
          "type": "integer",
          "description": "Controllers Group"
        }
      },
      "required": [
        
      ],
      "description": "Attributes for creating a Controller Configuration"
    },
    "ControllerCreateInput": {
      "type": "object",
      "properties": {
        "device_ip": {
          "type": "string",
          "description": "Device's IP Adress"
        },
        "device_name": {
          "type": "string",
          "description": "Name of the Device"
        },
        "description": {
          "type": "string",
          "description": "Device's description"
        },
        "configuration": {
          "type": "object",
          "description": "Device's Configuration",
          "$ref": "#/definitions/ControllerConfigCreateInput"
        }
      },
      "required": [
        "device_ip",
        "device_name",
        "configuration"
      ],
      "description": "Attributes for creating a Controller"
    }
  },
  "swagger": "2.0"
}

Swagger-UI configuration options:

SwaggerUIBundle({
    url: '/api-docs/swagger.json',
    dom_id: '#swagger-ui',
    deepLinking: true,
    presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
    plugins: [SwaggerUIBundle.plugins.DownloadUrl],
    layout: 'StandaloneLayout',
    validatorUrl: null,
});

?yourQueryStringConfig

Describe the bug you're encountering

Editing the body of a Post-Request in the <textarea> causes it to lose focus after typing one character. As far as I can tell the Element gets removed and added after an input

To reproduce...

Steps to reproduce the behavior:

1. Edit the Body Model Value in a Post-Request

Expected behavior

It should allow me to edit the Value freely without having to focus the textarea after each character

Screenshots

Additional context or thoughts

I am using the following Package to generate the swagger.json: https://www.npmjs.com/package/swagger-express-ts

[mathis-m]

I have tried to reproduce it with the latest swagger-ui version, there this does not happen. Maybe open a issue at olivierlsc/swagger-express-ts`, for updating the swagger-ui-dist dependency.

[lipchev]

I can also confirm this issue with Swagger UI v4.0.0-rc.2- using the petstore.
Switching to 3.52.3 has resolved the issue for me.

[char0n]

I can confirm as well. v4.0.0-rc.2 is affected. This is high prio.

[mathis-m]

Looks like only OAS 2.x schemas are effected. Meaning the issue lies in ParamBody component. React is rerendering the component on change, this results in focus loss!

[mathis-m]

@char0n I got it, it is rendered multiple times, when the handleOnChange is emitted by key stroke the isEditBox state is set to undefined, instead it should stay the same. I'll provide PR in the next minutes.

[mathis-m]

3.52.3 not affected.
3.50.0 not affected, which is confusing because olivierlsc/swagger-express-ts is affected according to OP.

[char0n]

Tested manually on release/4.x branch after merging #7548. Cannot reproduced anymore, the bugfix is effective. All the tests are passing.