diff --git a/docs/data/base/components/input/OTPInput.js b/docs/data/base/components/input/OTPInput.js
index 100f7d0961c180..2ab23f4bfcb974 100644
--- a/docs/data/base/components/input/OTPInput.js
+++ b/docs/data/base/components/input/OTPInput.js
@@ -18,15 +18,15 @@ function OTP({ seperator, inputCount, otp, setOtp }) {
   const handleKeyDown = (event, currentIndex) => {
     switch (event.key) {
       case 'ArrowLeft':
+        event.preventDefault();
         if (currentIndex > 0) {
-          event.preventDefault();
           focusInput(currentIndex - 1);
           selectInput(currentIndex - 1);
         }
         break;
       case 'ArrowRight':
+        event.preventDefault();
         if (currentIndex < inputCount - 1) {
-          event.preventDefault();
           focusInput(currentIndex + 1);
           selectInput(currentIndex + 1);
         }
diff --git a/docs/data/base/components/input/OTPInput.tsx b/docs/data/base/components/input/OTPInput.tsx
index c91916b635131f..d059db1b9b86f6 100644
--- a/docs/data/base/components/input/OTPInput.tsx
+++ b/docs/data/base/components/input/OTPInput.tsx
@@ -33,15 +33,15 @@ function OTP({
   ) => {
     switch (event.key) {
       case 'ArrowLeft':
+        event.preventDefault();
         if (currentIndex > 0) {
-          event.preventDefault();
           focusInput(currentIndex - 1);
           selectInput(currentIndex - 1);
         }
         break;
       case 'ArrowRight':
+        event.preventDefault();
         if (currentIndex < inputCount - 1) {
-          event.preventDefault();
           focusInput(currentIndex + 1);
           selectInput(currentIndex + 1);
         }