From 76704ddd63f85ab429e171522ed732ef0dc0e705 Mon Sep 17 00:00:00 2001
From: ArmandoGraterol <armandogrtrl@gmail.com>
Date: Thu, 1 Jul 2021 12:43:03 -0300
Subject: [PATCH] Improved error logic check on Input component

---
 src/modules/core/components/Fields/Input/Input.tsx          | 3 ++-
 .../core/components/Fields/InputStatus/InputStatus.tsx      | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/modules/core/components/Fields/Input/Input.tsx b/src/modules/core/components/Fields/Input/Input.tsx
index 42c5f63b901..6768f339ef1 100644
--- 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
index 80ab3e4cfe7..2f371afe2d7 100644
--- 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}