fix: [One-Time Password Field] disable all inputs when disable is true (#3548)

Author: nayounsang

.changeset/kind-icons-tan.md

@@ -0,0 +1,5 @@
+---
+'@radix-ui/react-one-time-password-field': patch
+---
+
+Fix: disable otp input

packages/react/one-time-password-field/src/one-time-password-field.test.tsx

@@ -53,6 +53,21 @@ describe('given a default OneTimePasswordField', () => {
     expect(hiddenInput.value).toBe('1');
   });
 
+  it('should disable all inputs when Root is disabled', () => {
+    rendered.rerender(
+      <OneTimePasswordField.Root disabled>
+        <OneTimePasswordField.Input />
+        <OneTimePasswordField.Input />
+        <OneTimePasswordField.HiddenInput name="code" />
+      </OneTimePasswordField.Root>
+    );
+
+    const inputs = rendered.container.querySelectorAll('input:not([type="hidden"])');
+    inputs.forEach(input => {
+      expect(input).toBeDisabled();
+    });
+  });
+
   // TODO: userEvent paste not behaving as expected. Debug and unskip.
   // Replicated in storybook for now.
   it.todo('pastes the code into the input', async () => {

packages/react/one-time-password-field/src/one-time-password-field.tsx

@@ -590,7 +590,7 @@ const OneTimePasswordFieldInput = React.forwardRef<
     'OneTimePasswordFieldInput',
     __scopeOneTimePasswordField
   );
-  const { dispatch, userActionRef, validationType, isHydrated } = context;
+  const { dispatch, userActionRef, validationType, isHydrated, disabled } = context;
   const collection = useCollection(__scopeOneTimePasswordField);
   const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);
 
@@ -639,6 +639,7 @@ const OneTimePasswordFieldInput = React.forwardRef<
             <Primitive.Root.input
               ref={composedInputRef}
               type={context.type}
+              disabled={disabled}
               aria-label={`Character ${index + 1} of ${collection.size}`}
               autoComplete={supportsAutoComplete ? context.autoComplete : 'off'}
               data-1p-ignore={supportsAutoComplete ? undefined : 'true'}