Fixed issue with typing multiple characters for Selenium

TIER · Jun 3, 2022 · 48bd6d8 · 48bd6d8
1 parent 3559e71
commit 48bd6d8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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}