From 1f136afd7a17d4f53f0b90a689d0fd4605b1c208 Mon Sep 17 00:00:00 2001
From: Alexandre Drouin <alexandre.drouin@orckestra.com>
Date: Wed, 5 Mar 2025 10:26:25 -0500
Subject: [PATCH 1/3] fix: Add debounce to textarea component to improve
 performance

Wrap the textarea component with DebounceInput to improve performance
when modifying text in the body of a request
---
 src/core/components/layout-utils.jsx                          | 4 ++--
 .../e2e-cypress/e2e/features/oas3-request-body-required.cy.js | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/core/components/layout-utils.jsx b/src/core/components/layout-utils.jsx
index c23f5186277..940aa75f628 100644
--- a/src/core/components/layout-utils.jsx
+++ b/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,8 +125,7 @@ export class Button extends React.Component {
 
 }
 
-
-export const TextArea = (props) => <textarea {...props} />
+export const TextArea = (props) => <DebounceInput element="textarea" debounceTimeout={350} forceNotifyByEnter={false} {...props} />
 
 export const Input = (props) => <input {...props} />
 
diff --git a/test/e2e-cypress/e2e/features/oas3-request-body-required.cy.js b/test/e2e-cypress/e2e/features/oas3-request-body-required.cy.js
index 4da95e67f3c..637bc2879e1 100644
--- a/test/e2e-cypress/e2e/features/oas3-request-body-required.cy.js
+++ b/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() // HACK: force the debounce on the textarea to trigger
         // 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() // HACK: force the debounce on the textarea to trigger
         // 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() // HACK: force the debounce on the textarea to trigger
         // Execute
         .get(".execute.opblock-control__btn")
         .click()

From 6b870600349f667233937b216a9e556354bea48e Mon Sep 17 00:00:00 2001
From: Alexandre Drouin <alexandre.drouin@orckestra.com>
Date: Thu, 24 Apr 2025 08:43:47 -0400
Subject: [PATCH 2/3] Remove HACK comments

---
 .../e2e/features/oas3-request-body-required.cy.js           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/e2e-cypress/e2e/features/oas3-request-body-required.cy.js b/test/e2e-cypress/e2e/features/oas3-request-body-required.cy.js
index 637bc2879e1..8f3d353b2f6 100644
--- a/test/e2e-cypress/e2e/features/oas3-request-body-required.cy.js
+++ b/test/e2e-cypress/e2e/features/oas3-request-body-required.cy.js
@@ -79,7 +79,7 @@ describe("OpenAPI 3.0 Validation for Required Request Body and Request Body Fiel
         )
         .should("not.have.class", "invalid")
         .clear()
-        .blur() // HACK: force the debounce on the textarea to trigger
+        .blur()
         // Execute
         .get(".execute.opblock-control__btn")
         .click()
@@ -105,7 +105,7 @@ describe("OpenAPI 3.0 Validation for Required Request Body and Request Body Fiel
         )
         .clear()
         .type(" ")
-        .blur() // HACK: force the debounce on the textarea to trigger
+        .blur()
         // Execute
         .get(".execute.opblock-control__btn")
         .click()
@@ -199,7 +199,7 @@ describe("OpenAPI 3.0 Validation for Required Request Body and Request Body Fiel
         )
         .should("not.have.class", "invalid")
         .clear()
-        .blur() // HACK: force the debounce on the textarea to trigger
+        .blur()
         // Execute
         .get(".execute.opblock-control__btn")
         .click()

From d905006005f7c860269e4a8026c6017761e2e9cf Mon Sep 17 00:00:00 2001
From: Alexandre Drouin <alexandre.drouin@orckestra.com>
Date: Tue, 29 Apr 2025 08:33:44 -0400
Subject: [PATCH 3/3] refactor: Create standalone DebounceTextArea component

---
 src/core/components/layout-utils.jsx                          | 4 +++-
 src/core/components/param-body.jsx                            | 2 +-
 .../json-schema-5/components/json-schema-components.jsx       | 2 +-
 src/core/plugins/oas3/components/request-body-editor.jsx      | 2 +-
 test/e2e-cypress/e2e/features/schema-form.cy.js               | 1 +
 .../plugins/json-schema-5/components/json-schema-form.jsx     | 3 ++-
 6 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/core/components/layout-utils.jsx b/src/core/components/layout-utils.jsx
index 940aa75f628..2066f7aae5e 100644
--- a/src/core/components/layout-utils.jsx
+++ b/src/core/components/layout-utils.jsx
@@ -125,7 +125,9 @@ export class Button extends React.Component {
 
 }
 
-export const TextArea = (props) => <DebounceInput element="textarea" debounceTimeout={350} forceNotifyByEnter={false} {...props} />
+export const TextArea = (props) => <textarea {...props} />
+
+export const DebounceTextArea = (props) => <DebounceInput element={TextArea} debounceTimeout={350} forceNotifyByEnter={false} {...props} />
 
 export const Input = (props) => <input {...props} />
 
diff --git a/src/core/components/param-body.jsx b/src/core/components/param-body.jsx
index 878b4546ab4..ed9a6a93138 100644
--- a/src/core/components/param-body.jsx
+++ b/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
diff --git a/src/core/plugins/json-schema-5/components/json-schema-components.jsx b/src/core/plugins/json-schema-5/components/json-schema-components.jsx
index 6575a067dcd..297644ff747 100644
--- a/src/core/plugins/json-schema-5/components/json-schema-components.jsx
+++ b/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 (
diff --git a/src/core/plugins/oas3/components/request-body-editor.jsx b/src/core/plugins/oas3/components/request-body-editor.jsx
index dd82aeb036e..83d1f0099f3 100644
--- a/src/core/plugins/oas3/components/request-body-editor.jsx
+++ b/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">
diff --git a/test/e2e-cypress/e2e/features/schema-form.cy.js b/test/e2e-cypress/e2e/features/schema-form.cy.js
index 0b8ff348c54..52b2a062f1e 100644
--- a/test/e2e-cypress/e2e/features/schema-form.cy.js
+++ b/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
diff --git a/test/unit/core/plugins/json-schema-5/components/json-schema-form.jsx b/test/unit/core/plugins/json-schema-5/components/json-schema-form.jsx
index 4600beb0784..6c81ebad2cb 100644
--- a/test/unit/core/plugins/json-schema-5/components/json-schema-form.jsx
+++ b/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]