From 264252bd07a025979a7e42a07d5163bf4ea9b433 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 27 Sep 2023 17:46:10 +0800
Subject: [PATCH] chore: wrapper also has oor cls

---
 src/Input.tsx        |  6 ++++--
 tests/count.test.tsx | 29 +++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index 4645995..c78195b 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -149,6 +149,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     }
   };
 
+  // ====================== Input =======================
+  const outOfRangeCls = isOutOfRange && `${prefixCls}-out-of-range`;
+
   const getInputElement = () => {
     // Fix https://fb.me/react-unknown-prop
     const otherProps = omit(
@@ -186,7 +189,6 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
           prefixCls,
           {
             [`${prefixCls}-disabled`]: disabled,
-            [`${prefixCls}-out-of-range`]: isOutOfRange,
           },
           classNames?.input,
         )}
@@ -246,7 +248,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     <BaseInput
       {...rest}
       prefixCls={prefixCls}
-      className={className}
+      className={clsx(className, outOfRangeCls)}
       inputElement={getInputElement()}
       handleReset={handleReset}
       value={formatValue}
diff --git a/tests/count.test.tsx b/tests/count.test.tsx
index 8ed2edf..86470d7 100644
--- a/tests/count.test.tsx
+++ b/tests/count.test.tsx
@@ -82,4 +82,33 @@ describe('Input.Count', () => {
     expect(container.querySelector('input')?.value).toEqual('🔥');
     expect(onCompositionEnd).toHaveBeenCalled();
   });
+
+  describe('cls', () => {
+    it('raw', () => {
+      const { container } = render(
+        <Input
+          count={{
+            max: 3,
+          }}
+          defaultValue="bamboo"
+        />,
+      );
+
+      expect(container.querySelector('.rc-input-out-of-range')).toBeTruthy();
+    });
+
+    it('wrapper', () => {
+      const { container } = render(
+        <Input
+          count={{
+            max: 3,
+            show: true,
+          }}
+          defaultValue="bamboo"
+        />,
+      );
+
+      expect(container.querySelector('.rc-input-out-of-range')).toBeTruthy();
+    });
+  });
 });