Improved error logic check on Input component

JoinColony · Jul 1, 2021 · 76704dd · 76704dd
1 parent 0fa3982
commit 76704dd
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/modules/core/components/Fields/Input/Input.tsx b/src/modules/core/components/Fields/Input/Input.tsx
@@ -161,12 +161,13 @@ const Input = ({
           <div className={styles.extension}>{extensionStringText}</div>
         )}
       </div>
-      {!elementOnly && (((error || forcedFieldError) && touched) || status) && (
+      {!elementOnly && (
         <InputStatus
           appearance={appearance}
           status={status}
           statusValues={statusValues}
           error={error || forcedFieldError}
+          touched={touched}
         />
       )}
     </div>

diff --git a/src/modules/core/components/Fields/InputStatus/InputStatus.tsx b/src/modules/core/components/Fields/InputStatus/InputStatus.tsx
@@ -1,6 +1,7 @@
 import { MessageDescriptor, useIntl } from 'react-intl';
 import React from 'react';
 
+import { isNil } from 'lodash';
 import { SimpleMessageValues } from '~types/index';
 import { getMainClasses } from '~utils/css';
 
@@ -26,6 +27,7 @@ interface Props {
 
   /** Values for status text (react-intl interpolation) (if applicable) */
   statusValues?: SimpleMessageValues;
+  touched?: boolean;
 }
 
 const displayName = 'InputStatus';
@@ -35,18 +37,20 @@ const InputStatus = ({
   error,
   status,
   statusValues,
+  touched,
 }: Props) => {
   const { formatMessage } = useIntl();
   const errorText = typeof error === 'object' ? formatMessage(error) : error;
   const statusText =
     typeof status === 'object' ? formatMessage(status, statusValues) : status;
+  const showErrorText = !isNil(touched) && touched;
   const text = errorText || statusText;
   const Element = appearance.direction === 'horizontal' ? 'span' : 'p';
   return (
     <Element
       className={getMainClasses(appearance, styles, {
         error: !!error,
-        hidden: !text,
+        hidden: !text || (!!error && !showErrorText),
       })}
     >
       {text}