Merged in bugfix/field-errors (pull request #489)

implemented check for rawErrors length
TIER · Jun 21, 2021 · 8ed495a · 8ed495a
2 parents 3a85981 + 8db84a6
commit 8ed495a
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 17 deletions.
diff --git a/ui/src/app/form/component/fields/FilterTargetField.js b/ui/src/app/form/component/fields/FilterTargetField.js
@@ -74,7 +74,7 @@ const FilterTargetField = ({
 
     /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => {
-        if (term && term.length >= 4) {
+        if (term?.length >= 4) {
             searchIds(term);
         }
     }, [term]);

diff --git a/ui/src/app/form/component/templates/FieldTemplate.js b/ui/src/app/form/component/templates/FieldTemplate.js
@@ -24,8 +24,8 @@ export function FieldTemplate ({
                     {children}
                 </div>
                 <div>
-                    {rawHelp && rawErrors.length < 1 && (
-                        <Form.Text className={rawErrors.length > 0 ? "text-danger" : "text-muted"} id={id}>
+                    {rawHelp && rawErrors?.length < 1 && (
+                        <Form.Text className={rawErrors?.length > 0 ? "text-danger" : "text-muted"} id={id}>
                             <Translate value={rawHelp} />
                         </Form.Text>
                     )}

diff --git a/ui/src/app/form/component/widgets/OptionWidget.js b/ui/src/app/form/component/widgets/OptionWidget.js
@@ -80,7 +80,7 @@ const OptionWidget = ({
         }
     };
 
-    const defaultInputValue = typeof value === 'object' && value && value.label ? value.label : value;
+    const defaultInputValue = typeof value === 'object' && value && value.label ? value.label : value ? value : '';
 
     const [ inputValue, setInputValue ] = React.useState( defaultInputValue );
 
@@ -90,7 +90,7 @@ const OptionWidget = ({
 
     return (
         <Form.Group className="mb-0">
-            <Form.Label className={`${(touched && rawErrors.length > 0) ? "text-danger" : ""}`}>
+            <Form.Label className={`${(touched && rawErrors?.length > 0) ? "text-danger" : ""}`}>
                 <span>
                     <Translate value={label || schema.title} />
                     {(label || schema.title) && required ? <FontAwesomeIcon icon={faAsterisk} className="text-danger ml-2" size="sm" /> : null}
@@ -104,7 +104,7 @@ const OptionWidget = ({
                 onChange={ _onChange }
                 allowNew={true}
                 multiple={false}
-                className={`toggle-typeahead ${rawErrors.length > 0 ? "is-invalid" : ""}`}
+                className={`toggle-typeahead ${rawErrors?.length > 0 ? "is-invalid" : ""}`}
                 options={opts}
                 placeholder={uiSchema['ui:placeholder'] ? translator(uiSchema['ui:placeholder'] ): ''}
                 disabled={disabled || readonly}
@@ -122,7 +122,7 @@ const OptionWidget = ({
                     <ToggleButton isOpen={isMenuShown} onClick={e => toggleMenu()} disabled={disabled || readonly} />
                 )}
             </Typeahead>
-            {rawErrors.length > 0 && touched && (
+            {rawErrors?.length > 0 && touched && (
                 <ListGroup as="ul">
                     {rawErrors.map((error, i) => {
                         return (

diff --git a/ui/src/app/form/component/widgets/SelectWidget.js b/ui/src/app/form/component/widgets/SelectWidget.js
@@ -86,7 +86,7 @@ const SelectWidget = ({
 
     return (
         <Form.Group>
-            <Form.Label className={`${touched && rawErrors.length > 0 ? "text-danger" : ""}`}>
+            <Form.Label className={`${touched && rawErrors?.length > 0 ? "text-danger" : ""}`}>
                 <span>
                     <Translate value={label || schema.title} />
                     {(label || schema.title) && required ? <FontAwesomeIcon icon={faAsterisk} className="ml-2 text-danger" size="sm" /> : null}
@@ -103,7 +103,7 @@ const SelectWidget = ({
                 disabled={disabled}
                 readOnly={readonly}
                 autoFocus={autofocus}
-                className={touched && rawErrors.length > 0 ? "is-invalid" : ""}
+                className={touched && rawErrors?.length > 0 ? "is-invalid" : ""}
                 onBlur={
                     onBlur &&
                     ((event) => {
@@ -132,7 +132,7 @@ const SelectWidget = ({
                 </option>
                 )}
             </Form.Control>
-            {rawErrors.length > 0 && touched && (
+            {rawErrors?.length > 0 && touched && (
                 <ListGroup as="ul">
                     {rawErrors.map((error, i) => {
                         return (

diff --git a/ui/src/app/form/component/widgets/TextWidget.js b/ui/src/app/form/component/widgets/TextWidget.js
@@ -38,10 +38,10 @@ const TextWidget = ({
         _onBlur(evt);
     };
 
-    // const classNames = [rawErrors.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""]
+    // const classNames = [rawErrors?.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""]
     return (
         <Form.Group className="mb-0">
-            <Form.Label className={`${rawErrors.length > 0 && touched ? "text-danger" : ""}`}>
+            <Form.Label className={`${rawErrors?.length > 0 && touched ? "text-danger" : ""}`}>
                 <span>
                     <Translate value={label || schema.title} />
                     {(label || schema.title) && required ?
@@ -56,7 +56,7 @@ const TextWidget = ({
                 required={required}
                 disabled={disabled}
                 readOnly={readonly}
-                className={rawErrors.length > 0 && touched ? "is-invalid" : ""}
+                className={rawErrors?.length > 0 && touched ? "is-invalid" : ""}
                 list={schema.examples ? `examples_${id}` : undefined}
                 type={inputType}
                 value={value || value === 0 ? value : ""}
@@ -73,7 +73,7 @@ const TextWidget = ({
                         })}
                 </datalist>
             ) : null}
-            {rawErrors.length > 0 && touched && (
+            {rawErrors?.length > 0 && touched && (
                 <ListGroup as="ul">
                     {rawErrors.map((error, i) => {
                         return (

diff --git a/ui/src/app/form/component/widgets/TextareaWidget.js b/ui/src/app/form/component/widgets/TextareaWidget.js
@@ -46,7 +46,7 @@ const TextareaWidget = ({
 
     return (
         <>
-            <Form.Label className={`${touched && rawErrors.length > 0 ? "text-danger" : ""}`}>
+            <Form.Label className={`${touched && rawErrors?.length > 0 ? "text-danger" : ""}`}>
                 <span>
                     <Translate value={label || schema.title} />
                     {(label || schema.title) && required ? <FontAwesomeIcon icon={faAsterisk} className="ml-2 text-danger" size="sm" /> : null}
@@ -69,7 +69,7 @@ const TextareaWidget = ({
                     onFocus={_onFocus}
                 />
             </InputGroup>
-            {rawErrors.length > 0 && touched && (
+            {rawErrors?.length > 0 && touched && (
                 <ListGroup as="ul">
                     {rawErrors.map((error, i) => {
                         return (

diff --git a/ui/src/app/form/component/widgets/UpDownWidget.js b/ui/src/app/form/component/widgets/UpDownWidget.js
@@ -66,7 +66,7 @@ const UpDownWidget = ({
                 onBlur={onCustomBlur}
                 onFocus={_onFocus}
             />
-            {rawErrors.length > 0 && touched && (
+            {rawErrors?.length > 0 && touched && (
                 <ListGroup as="ul">
                     {rawErrors.map((error, i) => {
                         return (