fix: OTP with controlled of '' not working (#48399)

* test: test driven * fix: controlled logic
ant-design · Apr 11, 2024 · 4216003 · 4216003
1 parent f460b48
commit 4216003
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/components/input/OTP/index.tsx b/components/input/OTP/index.tsx
@@ -45,7 +45,7 @@ export interface OTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
 }
 
 function strToArr(str: string) {
-  return str.split('');
+  return (str || '').split('');
 }
 
 const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
@@ -121,7 +121,7 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
   );
 
   React.useEffect(() => {
-    if (value) {
+    if (value !== undefined) {
       setValueCells(strToArr(value));
     }
   }, [value]);

diff --git a/components/input/__tests__/otp.test.tsx b/components/input/__tests__/otp.test.tsx
@@ -82,6 +82,15 @@ describe('Input.OTP', () => {
 
     rerender(<OTP value="LITTLE" />);
     expect(getText(container)).toBe('LITTLE');
+
+    rerender(<OTP value="" />);
+    expect(getText(container)).toBe('');
+
+    rerender(<OTP value="EXCEED-RANGE" />);
+    expect(getText(container)).toBe('EXCEED');
+
+    rerender(<OTP value={null!} />);
+    expect(getText(container)).toBe('');
   });
 
   it('focus to selection', async () => {