From 556515c1f3a244c1b5ce7bac9fcfbc878ba77ae3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20=C3=98vrelid?=
 <46874830+framitdavid@users.noreply.github.com>
Date: Tue, 6 Jun 2023 08:11:54 +0200
Subject: [PATCH] fix(InputWrapper): should only show invalid variant when
 field is invalid (#502)

---
 .../_InputWrapper/InputWrapper.test.tsx       | 28 +++++++++++++++++++
 .../components/_InputWrapper/InputWrapper.tsx |  3 +-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/_InputWrapper/InputWrapper.test.tsx b/packages/react/src/components/_InputWrapper/InputWrapper.test.tsx
index db774d9b20..9dbbd75624 100644
--- a/packages/react/src/components/_InputWrapper/InputWrapper.test.tsx
+++ b/packages/react/src/components/_InputWrapper/InputWrapper.test.tsx
@@ -245,6 +245,34 @@ describe('InputWrapper', () => {
         'aria-describedby',
       );
     });
+
+    it('should display error variant when character-limit exceeds', () => {
+      render({
+        label: 'Comment',
+        value: 'Hello',
+        characterLimit: {
+          maxCount: 2,
+          label: (count: number) => `${count} signs left`,
+          srLabel: '2 signs allowed',
+        },
+      });
+
+      expect(screen.queryByTestId('input-icon-error')).toBeInTheDocument();
+    });
+
+    it('should not display error variant when 0 characters left', () => {
+      render({
+        label: 'Comment',
+        value: 'He',
+        characterLimit: {
+          maxCount: 2,
+          label: (count: number) => `${count} signs left`,
+          srLabel: '2 signs allowed',
+        },
+      });
+
+      expect(screen.queryByTestId('input-icon-error')).not.toBeInTheDocument();
+    });
   });
 });
 
diff --git a/packages/react/src/components/_InputWrapper/InputWrapper.tsx b/packages/react/src/components/_InputWrapper/InputWrapper.tsx
index a4318cfcfa..15d380ef42 100644
--- a/packages/react/src/components/_InputWrapper/InputWrapper.tsx
+++ b/packages/react/src/components/_InputWrapper/InputWrapper.tsx
@@ -68,11 +68,12 @@ export const InputWrapper = ({
     ? autoCharLimitIdGenerated
     : undefined;
   const currentInputValue = value ? value.toString() : '';
+
   const { variant, iconVariant } = getVariant({
     disabled,
     isSearch,
     isValid: characterLimit
-      ? currentInputValue.length < characterLimit.maxCount && isValid
+      ? currentInputValue.length <= characterLimit.maxCount && isValid
       : isValid,
     readOnly,
   });