From 50c9913b08e6f874e8ad6e9cddc25f5379bad2e5 Mon Sep 17 00:00:00 2001
From: sai6855 <saichand685@gmail.com>
Date: Wed, 17 Jan 2024 14:30:34 +0530
Subject: [PATCH] display entered value

---
 docs/data/base/components/input/OTPInput.js   | 67 ++++++++++++-------
 docs/data/base/components/input/OTPInput.tsx  | 59 +++++++++-------
 .../components/input/OTPInput.tsx.preview     |  3 +-
 3 files changed, 80 insertions(+), 49 deletions(-)

diff --git a/docs/data/base/components/input/OTPInput.js b/docs/data/base/components/input/OTPInput.js
index 717baf197db7b6..762a9ec38f471c 100644
--- a/docs/data/base/components/input/OTPInput.js
+++ b/docs/data/base/components/input/OTPInput.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { Input as BaseInput } from '@mui/base/Input';
 import { Box, styled } from '@mui/system';
 
@@ -113,42 +114,60 @@ function OTP({ seperator, inputCount, value, onChange }) {
     }
   };
 
-  return new Array(inputCount).fill(null).map((_, index) => (
-    <React.Fragment key={index}>
-      <BaseInput
-        slots={{
-          input: InputElement,
-        }}
-        aria-label={`Digit ${index + 1} of OTP`}
-        slotProps={{
-          input: {
-            ref: (ele) => {
-              inputRefs.current[index] = ele;
-            },
-            onKeyDown: (event) => handleKeyDown(event, index),
-            onChange: (event) => handleChange(event, index),
-            onClick: (event) => handleClick(event, index),
-            onPaste: (event) => handlePaste(event, index),
-            value: value[index],
-          },
-        }}
-      />
-      {index === inputCount - 1 ? null : seperator}
-    </React.Fragment>
-  ));
+  return (
+    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+      {new Array(inputCount).fill(null).map((_, index) => (
+        <React.Fragment key={index}>
+          <BaseInput
+            slots={{
+              input: InputElement,
+            }}
+            aria-label={`Digit ${index + 1} of OTP`}
+            slotProps={{
+              input: {
+                ref: (ele) => {
+                  inputRefs.current[index] = ele;
+                },
+                onKeyDown: (event) => handleKeyDown(event, index),
+                onChange: (event) => handleChange(event, index),
+                onClick: (event) => handleClick(event, index),
+                onPaste: (event) => handlePaste(event, index),
+                value: value[index],
+              },
+            }}
+          />
+          {index === inputCount - 1 ? null : seperator}
+        </React.Fragment>
+      ))}
+    </Box>
+  );
 }
 
+OTP.propTypes = {
+  inputCount: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired,
+  seperator: PropTypes.node,
+  value: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
 export default function OTPInput() {
   const inputCount = 5;
   const [otp, setOtp] = React.useState(new Array(inputCount).fill(''));
   return (
-    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
       <OTP
         seperator={<span>-</span>}
         value={otp}
         onChange={setOtp}
         inputCount={inputCount}
       />
+      <span>Entered value: {otp.join('')}</span>
     </Box>
   );
 }
diff --git a/docs/data/base/components/input/OTPInput.tsx b/docs/data/base/components/input/OTPInput.tsx
index 812f1e1cd7468a..3d00f0a6e501d0 100644
--- a/docs/data/base/components/input/OTPInput.tsx
+++ b/docs/data/base/components/input/OTPInput.tsx
@@ -137,42 +137,53 @@ function OTP({
     }
   };
 
-  return new Array(inputCount).fill(null).map((_, index) => (
-    <React.Fragment key={index}>
-      <BaseInput
-        slots={{
-          input: InputElement,
-        }}
-        aria-label={`Digit ${index + 1} of OTP`}
-        slotProps={{
-          input: {
-            ref: (ele) => {
-              inputRefs.current[index] = ele!;
-            },
-            onKeyDown: (event) => handleKeyDown(event, index),
-            onChange: (event) => handleChange(event, index),
-            onClick: (event) => handleClick(event, index),
-            onPaste: (event) => handlePaste(event, index),
-            value: value[index],
-          },
-        }}
-      />
-      {index === inputCount - 1 ? null : seperator}
-    </React.Fragment>
-  ));
+  return (
+    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+      {new Array(inputCount).fill(null).map((_, index) => (
+        <React.Fragment key={index}>
+          <BaseInput
+            slots={{
+              input: InputElement,
+            }}
+            aria-label={`Digit ${index + 1} of OTP`}
+            slotProps={{
+              input: {
+                ref: (ele) => {
+                  inputRefs.current[index] = ele!;
+                },
+                onKeyDown: (event) => handleKeyDown(event, index),
+                onChange: (event) => handleChange(event, index),
+                onClick: (event) => handleClick(event, index),
+                onPaste: (event) => handlePaste(event, index),
+                value: value[index],
+              },
+            }}
+          />
+          {index === inputCount - 1 ? null : seperator}
+        </React.Fragment>
+      ))}
+    </Box>
+  );
 }
 
 export default function OTPInput() {
   const inputCount = 5;
   const [otp, setOtp] = React.useState<string[]>(new Array(inputCount).fill(''));
   return (
-    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
       <OTP
         seperator={<span>-</span>}
         value={otp}
         onChange={setOtp}
         inputCount={inputCount}
       />
+      <span>Entered value: {otp.join('')}</span>
     </Box>
   );
 }
diff --git a/docs/data/base/components/input/OTPInput.tsx.preview b/docs/data/base/components/input/OTPInput.tsx.preview
index 957b34510e63f4..3a553e4f01a7cf 100644
--- a/docs/data/base/components/input/OTPInput.tsx.preview
+++ b/docs/data/base/components/input/OTPInput.tsx.preview
@@ -3,4 +3,5 @@
   value={otp}
   onChange={setOtp}
   inputCount={inputCount}
-/>
\ No newline at end of file
+/>
+<span>Entered value: {otp.join('')}</span>
\ No newline at end of file