fix: Add debounce to textarea component to improve performance

src/core/components/layout-utils.jsx

@@ -1,5 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
+import DebounceInput from "react-debounce-input"
 
 function xclass(...args) {
   return args.filter(a => !!a).join(" ").trim()
@@ -124,9 +125,10 @@ export class Button extends React.Component {
 
 }
 
-
 export const TextArea = (props) => <textarea {...props} />
 
+export const DebounceTextArea = (props) => <DebounceInput element={TextArea} debounceTimeout={350} forceNotifyByEnter={false} {...props} />
+
 export const Input = (props) => <input {...props} />
 
 export class Select extends React.Component {

src/core/components/param-body.jsx

@@ -101,7 +101,7 @@ export default class ParamBody extends PureComponent {
     } = this.props
 
     const Button = getComponent("Button")
-    const TextArea = getComponent("TextArea")
+    const TextArea = getComponent("DebounceTextArea")
     const HighlightCode = getComponent("HighlightCode", true)
     const ContentType = getComponent("contentType")
     // for domains where specSelectors not passed

src/core/plugins/json-schema-5/components/json-schema-components.jsx

@@ -422,7 +422,7 @@ export class JsonSchema_object extends PureComponent {
       disabled
     } = this.props
 
-    const TextArea = getComponent("TextArea")
+    const TextArea = getComponent("DebounceTextArea")
     errors = errors.toJS ? errors.toJS() : Array.isArray(errors) ? errors : []
 
     return (

src/core/plugins/oas3/components/request-body-editor.jsx

@@ -86,7 +86,7 @@ export default class RequestBodyEditor extends PureComponent {
     } = this.state
 
     let isInvalid = errors.size > 0 ? true : false
-    const TextArea = getComponent("TextArea")
+    const TextArea = getComponent("DebounceTextArea")
 
     return (
       <div className="body-param">

test/e2e-cypress/e2e/features/oas3-request-body-required.cy.js

@@ -79,6 +79,7 @@ describe("OpenAPI 3.0 Validation for Required Request Body and Request Body Fiel
         )
         .should("not.have.class", "invalid")
         .clear()
+        .blur()
         // Execute
         .get(".execute.opblock-control__btn")
         .click()
@@ -104,6 +105,7 @@ describe("OpenAPI 3.0 Validation for Required Request Body and Request Body Fiel
         )
         .clear()
         .type(" ")
+        .blur()
         // Execute
         .get(".execute.opblock-control__btn")
         .click()
@@ -197,6 +199,7 @@ describe("OpenAPI 3.0 Validation for Required Request Body and Request Body Fiel
         )
         .should("not.have.class", "invalid")
         .clear()
+        .blur()
         // Execute
         .get(".execute.opblock-control__btn")
         .click()

test/e2e-cypress/e2e/features/schema-form.cy.js

@@ -814,6 +814,7 @@ describe("OpenAPI 3.0 Additional JsonSchemaForm in a Parameter", () => {
               }
             ]`
           )
+          .blur()
           .should("contain.text", "Jane")
           .should("contain.text", "201")
           // Execute

test/unit/core/plugins/json-schema-5/components/json-schema-form.jsx

@@ -5,8 +5,9 @@ import { mount, render } from "enzyme"
 import * as JsonSchemaComponents from "core/plugins/json-schema-5/components/json-schema-components"
 import { foldType } from "core/plugins/json-schema-2020-12-samples/fn/index"
 import { makeIsFileUploadIntended } from "core/plugins/oas3/fn"
+import { DebounceTextArea } from "core/components/layout-utils"
 
-const components = {...JsonSchemaComponents, Select, Input, TextArea}
+const components = {...JsonSchemaComponents, Select, Input, TextArea, DebounceTextArea}
 
 const getComponentStub = (name) => {
   if(components[name]) return components[name]