feat: OTPInput field value clear behaviour changes (#2524)

* field value clear behaviour changes for OTPInput

* Create eighty-doors-yell.md

---------

Co-authored-by: Anurag Hazra <anurag.hazra@razorpay.com>

Author: kabilansakthivelu

.changeset/eighty-doors-yell.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+feat: Improve OTPInput field value clear behaviour

packages/blade/src/components/Input/OTPInput/OTPInput.tsx

@@ -294,8 +294,15 @@ const _OTPInput: React.ForwardRefRenderFunction<HTMLInputElement[], OTPInputProp
   }: FormInputOnKeyDownEvent & { currentOtpIndex: number }): void => {
     if (key === 'Backspace' || code === 'Backspace' || code === 'Delete' || key === 'Delete') {
       event.preventDefault?.();
-      handleOnChange({ value: '', currentOtpIndex });
-      focusOnOtpByIndex(--currentOtpIndex);
+      if (otpValue[currentOtpIndex]) {
+        // Clear the value at the current index if value exists
+        handleOnChange({ value: '', currentOtpIndex });
+      } else {
+        // Move focus to the previous input if the current input is empty
+        // and clear the value at the new active (previous) index
+        focusOnOtpByIndex(--currentOtpIndex);
+        handleOnChange({ value: '', currentOtpIndex });
+      }
     } else if (key === 'ArrowLeft' || code === 'ArrowLeft') {
       event.preventDefault?.();
       focusOnOtpByIndex(--currentOtpIndex);

packages/blade/src/components/Input/OTPInput/__tests__/OTPInput.web.test.tsx

@@ -247,10 +247,10 @@ describe('<OTPInput />', () => {
     expect(allInputs[5]).toHaveFocus();
     await user.keyboard('{Backspace}');
     expect(allInputs[5]).toHaveValue('');
-    expect(allInputs[4]).toHaveFocus();
+    expect(allInputs[5]).toHaveFocus();
     await user.keyboard('{Delete}');
     expect(allInputs[4]).toHaveValue('');
-    expect(allInputs[3]).toHaveFocus();
+    expect(allInputs[4]).toHaveFocus();
   });
 
   it('should pass a11y', async () => {