From 48bd6d8557b0dc2c9e0fc686caf08e245c2a38ef Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Fri, 3 Jun 2022 10:19:14 -0700
Subject: [PATCH] Fixed issue with typing multiple characters for Selenium

---
 ui/src/app/form/component/widgets/TextWidget.js     |  9 +++++++--
 ui/src/app/form/component/widgets/TextareaWidget.js | 11 ++++++++---
 ui/src/app/form/component/widgets/UpDownWidget.js   |  8 ++++++--
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/ui/src/app/form/component/widgets/TextWidget.js b/ui/src/app/form/component/widgets/TextWidget.js
index 903c6d8b4..d4801ab4e 100644
--- a/ui/src/app/form/component/widgets/TextWidget.js
+++ b/ui/src/app/form/component/widgets/TextWidget.js
@@ -26,18 +26,23 @@ const TextWidget = ({
     rawErrors = [],
     ...props
 }) => {
-    const _onChange = ({target: { value }}) => onChange(value === "" ? options.emptyValue : value);
+    const _onChange = ({target: { value }}) => setFieldValue(value === "" ? options.emptyValue : value);
     const _onBlur = ({ target: { value } }) => onBlur(id, value);
     const _onFocus = ({target: { value }} ) => onFocus(id, value);
     const inputType = (type || schema.type) === 'string' ? 'text' : `${type || schema.type}`;
 
     const [touched, setTouched] = React.useState(false);
+    const [fieldValue, setFieldValue] = React.useState(value || value === 0 ? value : "");
 
     const onCustomBlur = (evt) => {
         setTouched(true);
         _onBlur(evt);
     };
 
+    React.useEffect(() => {
+        onChange(fieldValue);
+    }, [fieldValue, onChange]);
+
     // const classNames = [rawErrors?.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""]
     return (
         <Form.Group>
@@ -60,7 +65,7 @@ const TextWidget = ({
                 className={rawErrors?.length > 0 && touched ? "is-invalid" : ""}
                 list={schema.examples ? `examples_${id}` : undefined}
                 type={inputType}
-                value={value || value === 0 ? value : ""}
+                value={fieldValue}
                 onChange={_onChange}
                 onBlur={onCustomBlur}
                 onFocus={_onFocus}
diff --git a/ui/src/app/form/component/widgets/TextareaWidget.js b/ui/src/app/form/component/widgets/TextareaWidget.js
index 8da910cd9..6a748c3b4 100644
--- a/ui/src/app/form/component/widgets/TextareaWidget.js
+++ b/ui/src/app/form/component/widgets/TextareaWidget.js
@@ -28,8 +28,8 @@ const TextareaWidget = ({
 }) => {
     const _onChange = ({
         target: { value },
-    }) =>
-        onChange(value === "" ? options.emptyValue : value);
+    }) => setFieldValue(value === "" ? options.emptyValue : value);
+
     const _onBlur = ({
         target: { value },
     }) => onBlur(id, value);
@@ -38,6 +38,11 @@ const TextareaWidget = ({
     }) => onFocus(id, value);
 
     const [touched, setTouched] = React.useState(false);
+    const [fieldValue, setFieldValue] = React.useState(value || value === 0 ? value : "");
+
+    React.useEffect(() => {
+        onChange(fieldValue);
+    }, [fieldValue, onChange]);
 
     const onCustomBlur = (evt) => {
         setTouched(true);
@@ -60,7 +65,7 @@ const TextareaWidget = ({
                     placeholder={placeholder}
                     disabled={disabled}
                     readOnly={readonly}
-                    value={value}
+                    value={fieldValue}
                     required={required}
                     autoFocus={autofocus}
                     rows={options.rows || 5}
diff --git a/ui/src/app/form/component/widgets/UpDownWidget.js b/ui/src/app/form/component/widgets/UpDownWidget.js
index 173e19951..de614bac1 100644
--- a/ui/src/app/form/component/widgets/UpDownWidget.js
+++ b/ui/src/app/form/component/widgets/UpDownWidget.js
@@ -27,7 +27,7 @@ const UpDownWidget = ({
 }) => {
     const _onChange = ({
         target: { value },
-    }) => onChange(value);
+    }) => setFieldValue(value);
     const _onBlur = ({ target: { value } }) =>
         onBlur(id, value);
     const _onFocus = ({
@@ -37,6 +37,10 @@ const UpDownWidget = ({
     const translator = useTranslator();
 
     const [touched, setTouched] = React.useState(false);
+    const [fieldValue, setFieldValue] = React.useState(value);
+    React.useEffect(() => {
+        onChange(fieldValue);
+    }, [fieldValue, onChange]);
 
     const onCustomBlur = (evt) => {
         setTouched(true);
@@ -60,7 +64,7 @@ const UpDownWidget = ({
                 disabled={disabled}
                 readOnly={readonly}
                 placeholder={uiSchema['ui:placeholder'] ? translator(uiSchema['ui:placeholder']) : ''}
-                value={value || value === 0 ? value : ""}
+                value={fieldValue}
                 step={schema.multipleOf}
                 onChange={_onChange}
                 onBlur={onCustomBlur}